tanstack / select Goto Github PK
View Code? Open in Web Editor NEW๐ค Powerful select, multi-select and autocomplete primitives for the web. TS/JS, React, Solid, Svelte and Vue.
๐ค Powerful select, multi-select and autocomplete primitives for the web. TS/JS, React, Solid, Svelte and Vue.
Just want to say thank you so much for made this dont understand why this pack dont have many stars.
Btw can i use async api with use select?
Hi, I try to test your hook in Next.js but I got this error. Could you ship your hook in a none transpiled version too?
ReferenceError: regeneratorRuntime is not defined
useDebounce
/mnt/ssd/repositories/test/ui/node_modules/use-select/dist/index.js:193:3
useSelect
/mnt/ssd/repositories/test/ui/node_modules/use-select/dist/index.js:392:27
MySelect
./components/MySelect.js:10
7 | const optionsRef = useRef();
8 |
9 | // Use useSelect to manage select state
> 10 | const {
| ^ 11 | visibleOptions,
12 | selectedOption,
13 | highlightedOption,
Love what you do, just wish that your codepen examples had less 3rd party deps.
โฎ๏ธ
h
Hey, thanks for the wonderful library. I could almost solve all my usecases. I found a few bugs and improvements that are possible.
highlightedOption
is mentioned in the API, but it is not currently exposed. It is missed in this commit during the reimplementation with index.
In the Docs, there is a small typo
This also can be achieved through a prop without degrading the existing functionality.
Please let me know if these are aligned with your vision for this library. If so we can discuss about the props and I can raise a PR as needed. Thanks
Hi I just want custom for all input tag, div,... but I just want use class name. I try to remove styled-components but it will be error... Can you please make a super simple of this?
https://tanstack.com/select is no longer working and no documentation can be found for this package :/
The "virtualised" list feature definitely makes sense for big lists. However, compared to e.g. react-virtualised this behaviour feels very sluggish/slow, even if you are just hovering over individual options in the list (might be also just me).
I assume it might be difficult to optimise the "virtualised" list, i.e. react-window
, but simpler to disable this functionality for e.g. smaller lists. Should this be an option?
I have everything working with use-select
except the search.
When I use the setSearch
function like so:
<input
type="text"
name="search"
autoComplete="off"
onChange={(e) => {
setSearch(e.target.value);
}}
className="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-9 sm:text-sm border-gray-300 rounded-md"
placeholder="Search"
/>
visibleOptions
always returns an empty array, no matter what I search for.
Also I try to override the filterFn like so:
const searchFilter = (options, searchValue) => {
console.log(options, searchValue);
return options;
};
const {
visibleOptions,
selectedOption,
getInputProps,
getOptionProps,
isOpen,
setOpen,
setSearch,
searchValue,
} = useSelect({
multi: true,
options,
value,
onChange,
optionsRef,
filterFn: (options, searchValue) => searchFilter(options, searchValue),
});
the searchFilter
function is never called (it never logs anything).
thanks for your good hook
would you want to add a typescript definition to it or convert it to typescript fro base?
I would be happy to do that with a PR
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.