Setting up a search bar to enable dark and light mode
In this video, we'll cover how to use Autocomplete.js to create a search bar that a user can type in commands to affect our application. By typing /dark or /light, a user will be able to toggle dark and light mode in their state of the application. This is the first step to creating a powerful "Omnibar" for users of your app.
Try out Algolia on https://www.algolia.com/developers/ge...
Follow along with this CodeSandbox: https://alg.li/omnibar-starter
Get the finished product: https://alg.li/omnibar-complete
Read the blog post: https://alg.li/omnibar-blog
Learn with Jason episode with Sarah Dayan covering Autocomplete: https://alg.li/HSvX1q
What is Autocomplete: https://alg.li/what-is-autocomplete
Setting up Autocomplete with React: https://alg.li/autocomplete-react
00:00 Intro
01:19 Forking the CodeSandbox
01:42 Setup Autocomplete.js to work with React
07:03 Adding the Autocomplete component to App.js
09:10 Adding static data to Autocomplete
12:28 Set up a filter function for the source
17:34 Set up result highlighting for the source
21:40 Set up onSelect methods to fire actions
24:55 Improve the UX and add a theme for the Item component
29:38 Use setContext to manage an "enabled" state
33:10 Next steps