Open techsemicolon opened 3 years ago
✔️ Deploy Preview for evergreen-storybook ready!
🔨 Explore the source changes: 2e63bab0941927f5d0c8e3e4e98a0538c0fb3a3c
🔍 Inspect the deploy log: https://app.netlify.com/sites/evergreen-storybook/deploys/616284f68224b6000739dbe1
😎 Browse the preview: https://deploy-preview-1345--evergreen-storybook.netlify.app
Overview
🌲🌲 Hello everyone 🌲🌲
I recently started exploring
evergreen
ui framework and I really like it.I found a use case where I wanted to implement
<Autocomplete>
component having items prop which is array of objects. I found a that currently autocomplete supports only array of strings for autocomplete items. So I am making this PR to help others who would like to use this component in similar way. :)<Autocomplete ...../>
component currently usesitemToString
function to stringify the each item from theitems
array passed through props.Now, if you have items like this :
Each
AutocompleteItem
of from the autocomplete dropdown receives props which are like this :This adds limitation as we do not have access to the item object to render custom option for autocomplete dropdown. Even when Autocomplete component does have
renderItem
prop, it is now limited to items with string elements.This PR resolves this by passing the item in the
renderItem
prop. This enhances flexibility of therenderItem
to handle custom objects as well as strings.For example :
If you have items with structure like this :
Then you can make autocomplete option using available renderItem like below :
I added detailed story for this as well as new component tests. Hope this helps :)
Screenshots (if applicable)
Documentation
🌲🌲 Happy Coding 🌲🌲