Comments (24)
I'm not sure what the progress on this is but I wanted to share my wrapper for react-select's multi component. I needed something like this to use with Chakra and wanted it to look the same so I spent a decent amount of time making it match visually. If you want to use it, here's the source. Feel free to use/modify it as needed until an official Chakra version comes out.
- Gist: https://gist.github.com/csandman/c687a9fb4275112f281ab9a5701457e4
- CodeSandbox: https://codesandbox.io/s/chakra-ui-react-select-648uv?file=/chakra-react-select.js
I'm also curious if anyone has any recommendations to change this, I'm still very new to the inner workings of Chakra and I'm sure I didn't do everything in the best way.
EDIT
I've noticed that this has gotten a positive reception so I figured I'd post an update. The wrapper I posted is now updated to more accurately work with the react-select controls, and also now has a size prop! it can accept sm
, md
, and lg
and it reflects the sizes of the normal chakra text input.
EDIT 2
I made it into an NPM package! https://www.npmjs.com/package/chakra-react-select
from chakra-ui.
Hi @Vynlar .
I'm currently trying to figure out the API for Chakra's Custom Select. I'd prefer we wrap an existing library and make the final API really simple and composable.
I also use react-select
as well but I'm a bit reluctant to use it in Chakra due to its size. I'm currently testing use-downshift
, a hook based library built for downshift
and it's quite interesting and should give us the composition and functionality we need.
Here's how I envision the API for Chakra's Simple Select (pretty similar to native):
// Simple Select
<Select isSearchable={true} value="..." defaultValue="...">
<Option value="...">Option 1</Option>
<Option value="...">Option 2</Option>
</Select>
// Grouped Select
<Select isSearchable={true} value="..." defaultValue="...">
<OptionGroup label="Option Group">
<Option value="...">Option 1</Option>
<Option value="...">Option 2</Option>
</OptionGroup>
</Select>
The advantage of using use-downshift
is that we can compose Autocomplete, Typeahead, and Multiselect out of it. Check out the docs: https://use-downshift.now.sh/docs-dropdown
Let me know what you think @Vynlar .
PS: I'm currently playing with it in CodeSandbox: https://codesandbox.io/s/chakra-playground-3tbl9
from chakra-ui.
For anyone that has had any interest in my wrapper for react-select, I finally made it into an NPM package! You can find it here: https://www.npmjs.com/package/chakra-react-select
from chakra-ui.
Here is another good one from Uber
https://baseweb.design/components/select/
from chakra-ui.
@segunadebayo use-downshift
looks like a much better solution for Chakra than react-select
does. It should let us create a great API that is homogenous with the existing Chakra components while still providing the features needed.
Looking forward to the first draft you come up with. Let the community know if we can help with any of these things.
from chakra-ui.
Hi @eranimo,
No work has started on it yet. I'll be happy to have you take a shot at the Select component. I'll open a new Issue for the API requirements of the Select component, then you can start some work once it's clear to you.
Thank you for choosing to contribute. Can't wait to see a Select component for Chakra.
from chakra-ui.
I think you can't go wrong with use-downshift
it's smaller, simpler and the flexibility it provides is the most important thing for projects like this.
However, I'd suggest that if we're going to follow the 1st route from now on, then we should be more clear about what's contained inside "fancy", putting down the minimum api requirements would help before making decisions and suggestions, you've added some requirements in there but if we combine this with the ComboBox
and the Tags Input
that are also in the roadmap and can be considered as variants of this component, then it might make sense to use react-select
since it'd cover these two as well.
tl;dr: The requirements has a direct impact in deciding how we implement the core component.
Also: great work guys, we've started using this on @cheerfulgiving it's been amazing so far, hope that we can contribute to this project ❤️
from chakra-ui.
Hi @fernandobandeira ,
Thank you for using Chakra UI @cheerfulgiving.
I'll create an issue that describes the minimum API requirements for the Select
& ComboBox
components. Then I'll get feedback from the community before building it.
Thanks for that suggestion.
from chakra-ui.
Thank you @Vynlar .
I do need help figuring out the react-popper
issue #31 with the <MenuButton/>
. I haven't looked at it yet and it'll be good to have someone look into it.
I'd be happy if you can jump on it.
from chakra-ui.
@Billmike Yes, I have started. Things have been crazy at work recently though, but I'll post a PR this weekend.
from chakra-ui.
Sorry, some things came up and I've been delayed getting this to a good point to PR.
from chakra-ui.
I'll create an issue that describes the minimum API requirements for the Select & ComboBox components.
@segunadebayo Please reference this issue when you do so, just to be able to follow the updates. I am eagerly waiting for Multi Select, the only feature that's stopping me from using Chakra in my two current projects.
Thank you for the library 👏
from chakra-ui.
Any updates on this? If work hasn't already started, I would be interested in contributing. A robust select component would really make this library feel complete.
from chakra-ui.
@segunadebayo Any update on the API requirements?
from chakra-ui.
Hi @eranimo @fernandobandeira @manzoorwanijk, I just added the API requirements for the Single Select component.
Let me know your thoughts.
After the Single Select, we'll tackle the MultiSelect component.
from chakra-ui.
@eranimo Has work begun yet on this component?
from chakra-ui.
Awesome then!
from chakra-ui.
Hey, any updates on this?
from chakra-ui.
It's been too long for me to wait for multiselect in Chakra UI, looks like I have to continue my struggle with AntDesign! 😞
from chakra-ui.
[Select] I've worked on the custom Select
component but not the multiselect. It'll be out in the next release.
from chakra-ui.
I'm closing this out. Check updates on #140
from chakra-ui.
@segunadebayo I totally agree with a custom approach for building a powerful Chakra-UI Select
component! Here's one using downshift
... It covers pretty much the basics such as array of string or objects, autocomplete etc ... But it's a start point... https://github.com/catho/quantum/tree/master/components/Dropdown
https://catho.github.io/quantum/?path=/story/forms--dropdown
from chakra-ui.
There have been some major improvements in version 2 and version 3 of my chakra-react-select
package, allowing for a fully customizable style system, and the native typescript support added in react-select@5
. So if my component didn't feel customizable enough at first, or you had issues implementing it in a TypeScript project, I highly recommend giving it a second chance.
from chakra-ui.
Here's a version I started building for an app using Chakra UI components, if anyone also wants it.
Untitled.mov
Here's the CodeSandbox for reference – it's just a simple component, and it might not be 100% optimized for your application yet 🤓
https://codesandbox.io/s/chakra-ui-multiselect-kn2gvz?file=/src/multi-select.js
from: #1293 (comment)
from chakra-ui.
Related Issues (20)
- support a more generic layerStyle
- `_hover` property should overwrite `style` property HOT 1
- v3: Avatar can't fallback to initials HOT 2
- (v2) Mark as `this: void` for callback values which is used by user. (@typescript-eslint/unbound-method) HOT 4
- `useDimensions` hook deprecated in v2.8.2 but documentation not updated
- Setting an input field's background color in the baseStyle theme object does not work
- Error in the docs for useOutsideClick hook
- borderRadius prop doesn't work for SkeletonText
- Some text code is not display when in Light Mode HOT 2
- V2 docs pointing to V3 version HOT 6
- Cannot read properties of null (reading 'registered') - Next.js
- Cannot read properties of null (reading 'registered') - Next.js
- <ToastContainer /> doesn't track outer React Context
- AvatarGroup - React does not recognize the showBorder prop. HOT 2
- React does not recognize the `showBorder` prop on a DOM element HOT 2
- Screenreaders unable to use arrow navigation when focussing tabs
- Google Lighthouse says Chakra `Uses ARIA roles on incompatible elements` HOT 1
- Feature Request: Chart for Chakra v3
- Separate button than AccordionButton to close the Accordion Panel
- `Default theme` documentation links to wrong Github page
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chakra-ui.