downshift - 🏎 Primitives to build simple, flexible, WAI-ARIA compliant enhanced input React components

  •        188

You need an autocomplete/dropdown/select experience in your application and you want it to be accessible. You also want it to be simple and flexible to account for your use cases.This is a component that controls user interactions and state for you so you can create autocomplete/dropdown/select/etc. components. It uses a render function as children which gives you maximum flexibility with a minimal API because you are responsible for the rendering of everything and you simply apply props to what you're rendering.

https://github.com/paypal/downshift#readme
https://github.com/paypal/downshift

Tags
Implementation
License
Platform

   




Related Projects

react-bootstrap-typeahead - React typeahead with Bootstrap styling

  •    Javascript

A React-based typeahead that relies on Bootstrap for styling and was originally inspired by Twitter's typeahead.js. It supports both single- and multi-selection and is compliant with WAI-ARIA authoring practices. Try the live examples. Please note that documentation and examples apply to the most recent release and may no longer be applicable if you're using an outdated version.

react-input-enhancements - Set of enhancements for input control

  •    Javascript

The intention of creating this library was to bring input component out of the dropdown/autocomplete/whatever code, so it could be easily replaced with your custom component, and also to split independent functionality into different components, which could be combined with each other (still not quite sure it was worth it, though). NB: these are not "high quality, ready for production components" - they are more of a concept (which is a fancy word for "they are still quite buggy"). Think twice before using it in production.

react-autosuggest - WAI-ARIA compliant React autosuggest component

  •    Javascript

Check out the Homepage and the Codepen examples. Array of suggestions to display. The only requirement is that suggestions is an array. Items in this array can take an arbitrary shape.

autocomplete - 🔮 Fast and full-featured autocomplete library

  •    TypeScript

The data that populates the autocomplete results are called sources. You can use whatever you want in your sources: a static set of searches terms, search results from an external source like an Algolia index, recent searches, and more. By configuring just those two required parameters (container and getSources) you can have an interactive autocomplete experience. The library creates an input and provides the interactivity and accessibility attributes, but you're in full control of the DOM elements to output.

react-autocomplete - WAI-ARIA compliant React autocomplete (combobox) component

  •    Javascript

WAI-ARIA compliant React autocomplete (combobox) component


react-typeahead - Pure react-based typeahead and typeahead-tokenizer

  •    Javascript

react-typeahead is a javascript library that provides a react-based typeahead, or autocomplete text entry, as well as a "typeahead tokenizer", a typeahead that allows you to select multiple results. Basic typeahead input and results list.

react-aria-menubutton - A fully accessible, easily themeable, React-powered menu button

  •    Javascript

A React component (set of components, really) that will help you build accessible menu buttons by providing keyboard interactions and ARIA attributes aligned with the WAI-ARIA Menu Button Design Pattern. Please check out the demo.

react-selectize

  •    LiveScript

ReactSelectize is a stateless Select component for ReactJS, that provides a platform for the more developer friendly SimpleSelect & MultiSelect components. Both SimpleSelect & MultiSelect have been designed to work as drop in replacement for the built-in React.DOM.Select component.

react-autocomplete - WAI-ARIA compliant React autocomplete (combobox) component

  •    Javascript

Accessible, extensible, Autocomplete for React.js.Check out more examples and get stuck right in with the online editor.

Reakit - Toolkit for building accessible rich web apps with React

  •    Typescript

Reakit helps to build accessible rich web apps with React. It is a lower level component library for building accessible high level UI libraries, design systems and applications with React. It strictly follows WAI-ARIA 1.1 standards and provides many of the widgets described in WAI-ARIA Authoring Practices like Button, Dialog, Tab and others. It has been built with composition in mind. In fact, its own components are composed by a few other abstract ones, like Role, Tabbable and Composite.

react-toggled - Component to build simple, flexible, and accessible toggle components

  •    Javascript

You want a toggle component that's simple and gives you complete control over rendering and state.This follows the patterns in downshift to expose an API that renders nothing and simply encapsulates the logic of a toggle component.

ng-select - :star: Native angular 6+ select component

  •    TypeScript

Library is under active development and may have API breaking changes for subsequent major versions after 1.0.0. To allow customization and theming, ng-select bundle includes only generic styles that are necessary for correct layout and positioning. To get full look of the control, include one of the themes in your application. If you're using the Angular CLI, you can add this to your styles.scss or include it in .angular-cli.json (Angular v5 and below) or angular.json (Angular v6 onwards).

Select2 - jQuery based replacement for select boxes

  •    Javascript

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. It can easily load items via AJAX and have them searchable, Ability to add new items on the fly, Easy support for loading more pages when the results are scrolled to the end, Enhancing native selects with a better multi-select interface and lot more.

react-colorful - 🎨 A tiny (2,5 KB) color picker component for React and Preact apps

  •    TypeScript

We provide 12 additional color picker components for different color models, unless your app needs a HEX string as an input/output format. The easiest way to tweak react-colorful is to create another stylesheet to override the default styles.

react-aria-modal - A fully accessible React modal built according WAI-ARIA Authoring Practices

  •    Javascript

A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices. Check out the demo.

Bootstrap-3-Typeahead - The Typeahead plugin from Twitter's Bootstrap 2 ready to use with Bootstrap 3 and Bootstrap 4

  •    Javascript

For simple autocomplete use cases there seems to be nothing wrong with the dropped typeahead plugin. Here you will find the typeahead autocomplete plugin for Twitter's Bootstrap 2 ready to use with Twitter's Bootstrap 3. The original code is written by @mdo and @fat. With Twitter Bootstrap 3 the typeahead plugin had been dropped. @mdo says: "in favor of folks using Twitter's typeahead. Twitter's typeahead has more features than the old bootstrap-typeahead.js and less bugs." Twitter's typeahead don't work direct with Bootstrap 3. The DOM structure of the dropdown menu used by typeahead.js differs from the DOM structure of the Bootstrap dropdown menu. You'll need to load some additional CSS in order to get the typeahead.js dropdown menu to fit the default Bootstrap theme. Try extended Bootstrap LESS or if your are looking for a more extended version try: typeahead.js-bootstrap3.less.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.