Custom Select without predefined UI for React using Context
yarn add selectless npm install selectless
There are three different ways to use
- On a component level,
selectlessprovides a basic component that you can customize with any css-in-js library or classname/style
- On a custom component level, each component provided by
selectlessaccepts a custom
renderprop that allows you to override the default representation/binding of the component
- On a low level controller,
selectlessprovides an HOC that lets you pass down the context props of
selectlessas props to your component. This allow a full control on how you want to use
I hope in a near future that me and/or the community can provide pre-styleds for the various css-in-js solutions existing out there.
This package was inspired by the great
react-select and the talk from Ryan Florence "Compound Components"
Why we created this package ?
So the purpose of this package is not to replace
react-select in a first place but to provide an alternative compatible with css-in-js libraries that let you have full control over the UI of your select without dealing with the logic behind a select.
In a near futur we hope we(our the community) can provide custom made select UI with
selectless as module packages for each css-in-js solutions and even SASS, LESS, etc. You can already find some examples in the storybook.
// src/components/customSelect.jsconst simpleOptions =value: 'paris' label: 'Paris'value: 'newyork' label: 'New-York'value: 'tokyo' label: 'Tokyo'const CustomSelect =<Select name="context" onChange=onChange options=simpleOptions ...props><Label /><List renderItem=Item /></Select>
There was no real solution for this problem when I started this project, then Kent C. Dodds released react-autocompletly (now downshift) that uses the same basic principles and try to solve the same problem. I started working on this a bit earlier but I got lazy and put the project aside. Anyway, right now his project has far more support so you should consider testing it too. :)
React-select is still really good.