Using Downshift

Downshift is a primitive to build simple, flexible, WAI-ARIA compliant enhanced input React components. More info

Articles & Tutorials

5 Most Common Dropdown Use Cases Solved with React Downshift (scotch.io)
Jun 26, 2018
Downshift is a library that helps you build simple, flexible, WAI-ARIA compliant enhanced input React components. Its major use case is for building autocomplete components but it can also be used to build dropdown components.
downshift 2.0.0 released (blog.kentcdodds.com)
Jun 15, 2018
Even better accessibility, React Native and ReasonReact support, even simpler API, improved docs, new examples site, Flow and TypeScript support, and a new online community.
Introducing downshift for React (blog.kentcdodds.com)
Aug 23, 2017
downshift is the primitive you need to build simple, flexible, WAI-ARIA compliant React autocomplete/typeahead/dropdown/select/combobox/etc (AKA “item selection”) (p)react components.

Video Guides & Talks

Releasing downshift 3.0.0 (youtube.com)
Oct 08, 2018
I'm going to actually do the release during this livestream! WOOO!
What's coming in downshift 3.0.0 (youtube.com)
Oct 06, 2018
I'm working on cleaning up a few things and making downshift 3.0.0!
Creating an autocomplete component with downshift (youtube.com)
Jun 13, 2018
Just going to build an autocomplete component with downshift for funzies.
downshift: integrating geniejs with downshift (youtube.com)
Aug 10, 2017
I built geniejs as a side project over 3 years ago and I wanted to see what it would be like to integrate the smarts of geniejs with the experience of downshift. I was not disappointed!
downshift: Downshift work build, preact support, and simplification (youtube.com)
Aug 08, 2017
Here I work on the rollup build, add support for preact out of the box, and simplify the API a bit.
downshift: fixing regressions and more testing (youtube.com)
Aug 08, 2017
Got some great feedback and fixed some regressions, then added more tests.
downshift: getting to 100% code coverage! (youtube.com)
Aug 08, 2017
This is the last bit of testing I needed to do to get to 100% automated code coverage!
downshift: refactor, simplify, and test! (youtube.com)
Aug 08, 2017
I'm finally solidifying things and got a bunch of tests written.
downshift: testing utils (youtube.com)
Aug 08, 2017
In this one I write tests for pure functions as well as mocking out DOM APIs. It's pretty wild.
downshift: Making controllable with state props (youtube.com)
Aug 07, 2017
This feature is one of the things that gives you ultimate control with downshift. It allows you to control and be notified of any internal state changes. I think it's pretty legit!
downshift: Making Downshift more accessible (youtube.com)
Aug 07, 2017
Here I work on some feedback I got from Marcy Sutton on the accessibility of downshift.
downshift: Implementing a React Autocomplete Component for PayPal with downshift (youtube.com)
Aug 02, 2017
I actually spend way more time just styling it than using the downshift APIs, but I think that's kinda the point. The downshift APIs are tiny. Enjoy!

Podcast Episodes

Advanced Component Patterns and Downshift with Kent C. Dodds (devchat.tv)
Mar 20, 2018
In this episode of React Round Up, the panel discusses advanced component patterns and Downshift. They talk about different component patterns, especially render prop patters, and the fact that Downshift allows for your components to be much more useful generally for more people. They also note that the render prop patterns can help to separate logic from view, which makes things easier to develop.
Kent C. Dodds - Building Reusable React Components with Render Props (fullstackradio.com)
Dec 21, 2017
In this episode, Adam talks to Kent C. Dodds about building downshift, a React autocomplete component he designed for experiences he needed to build at PayPal. Kent gives a behind-the-scenes look at how the library uses the render prop pattern to allow maximum customizability without complex configuration.