React.JS
made by https://0x3d.site
GitHub - downshift-js/downshift: 🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. - downshift-js/downshift
Visit Site
GitHub - downshift-js/downshift: 🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
Read the docs | See the intro blog post | Listen to the Episode 79 of the Full Stack Radio podcast
The problem
You need an autocomplete, a combobox or a 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. Finally, it should follow the ARIA design pattern for a combobox or a select, depending on your use case.
This solution
The library offers a couple of solutions. The first solution, which is the one we recommend you to try first, is a set of React hooks. Each hook provides the stateful logic needed to make the corresponding component functional and accessible. Navigate to the documentation for each by using the links in the list below.
- useSelect for a custom select component.
- useCombobox for a combobox or autocomplete input.
- useMultipleSelection for selecting multiple items in a select or a combobox, as well as deleting items from selection or navigating between the selected items.
The second solution is the Downshift
component, which can also be used to
create accessible combobox and select components, providing the logic in the
form of a render prop. It served as inspiration for developing the hooks and it
has been around for a while. It established a successful pattern for making
components accessible and functional while giving developers complete freedom
when building the UI.
Both useSelect and useCombobox support the latest ARIA combobox patterns for W3C, which Downshift does not. Consequently, we strongly recommend the you use the hooks. The hooks have been migrated to the ARIA 1.2 combobox pattern in the version 7 of downshift. There is a Migration Guide that documents the changes introduced in version 7.
The README
on this page covers only the component while each hook has its own
README
page. You can navigate to the hooks page or go directly
to the hook you need by using the links in the list above.
For examples on how to use the hooks or the Downshift component, check out our docsite!
🚨 Use the Downshift hooks 🚨
If you are new to the library, consider the useSelect and useCombobox hooks as the first option. As mentioned above, the hooks benefit from the updated ARIA patterns and are actively maintained and improved. If there are use cases that are supported by the Downshift component and not by the hooks, please create an issue in our repo. The Downshift component is going to be removed completely once the hooks become mature.
Downshift
This is a component that controls user interactions and state for you so you can create autocomplete, combobox or select dropdown components. It uses a render prop 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.
This differs from other solutions which render things for their use case and then expose many options to allow for extensibility resulting in a bigger API that is less flexible as well as making the implementation more complicated and harder to contribute to.
NOTE: The original use case of this component is autocomplete, however the API is powerful and flexible enough to build things like dropdowns as well.
Table of Contents
- Installation
- Usage
- Basic Props
- Advanced Props
- initialSelectedItem
- initialInputValue
- initialHighlightedIndex
- initialIsOpen
- defaultHighlightedIndex
- defaultIsOpen
- selectedItemChanged
- getA11yStatusMessage
- onSelect
- onStateChange
- onInputValueChange
- itemCount
- highlightedIndex
- inputValue
- isOpen
- selectedItem
- id
- inputId
- labelId
- menuId
- getItemId
- environment
- onOuterClick
- scrollIntoView
- stateChangeTypes
- Control Props
- Children Function
- Event Handlers
- Utilities
- React Native
- Advanced React Component Patterns course
- Examples
- FAQ
- Inspiration
- Other Solutions
- Bindings for ReasonML
- Contributors
- LICENSE
Installation
This module is distributed via npm which is bundled with node and
should be installed as one of your project's dependencies
:
npm install --save downshift
This package also depends on
react
. Please make sure you have it installed as well.
Note also this library supports
preact
out of the box. If you are usingpreact
then use the corresponding module in thepreact/dist
folder. You can evenimport Downshift from 'downshift/preact'
👍
Usage
import * as React from 'react'
import {render} from 'react-dom'
import Downshift from 'downshift'
const items = [
{value: 'apple'},
{value: 'pear'},
{value: 'orange'},
{value: 'grape'},
{value: 'banana'},
]
render(
<Downshift
onChange={selection =>
alert(selection ? `You selected ${selection.value}` : 'Selection Cleared')
}
itemToString={item => (item ? item.value : '')}
>
{({
getInputProps,
getItemProps,
getLabelProps,
getMenuProps,
isOpen,
inputValue,
highlightedIndex,
selectedItem,
getRootProps,
}) => (
<div>
<label {...getLabelProps()}>Enter a fruit</label>
<div
style={{display: 'inline-block'}}
{...getRootProps({}, {suppressRefError: true})}
>
<input {...getInputProps()} />
</div>
<ul {...getMenuProps()}>
{isOpen
? items
.filter(item => !inputValue || item.value.includes(inputValue))
.map((item, index) => (
<li
{...getItemProps({
key: item.value,
index,
item,
style: {
backgroundColor:
highlightedIndex === index ? 'lightgray' : 'white',
fontWeight: selectedItem === item ? 'bold' : 'normal',
},
})}
>
{item.value}
</li>
))
: null}
</ul>
</div>
)}
</Downshift>,
document.getElementById('root'),
)
There is also an example without getRootProps.
Warning: The example without
getRootProps
is not fully accessible with screen readers as it's not possible to achieve the HTML structure suggested by ARIA. We recommend following the example withgetRootProps
. Examples on how to useDownshift
component with and withoutgetRootProps
are on the docsite.
Downshift
is the only component exposed by this package. It doesn't render
anything itself, it just calls the render function and renders that. "Use a
render prop!"!
<Downshift>{downshift => <div>/* your JSX here! */</div>}</Downshift>
.
Basic Props
This is the list of props that you should probably know about. There are some advanced props below as well.
children
function({})
| required
This is called with an object. Read more about the properties of this object in the section "Children Function".
itemToString
function(item: any)
| defaults to:item => (item ? String(item) : '')
If your items are stored as, say, objects instead of strings, downshift still
needs a string representation for each one (e.g., to set inputValue
).
Note: This callback must include a null check: it is invoked with null
whenever the user abandons input via <Esc>
.
onChange
function(selectedItem: any, stateAndHelpers: object)
| optional, no useful default
Called when the selected item changes, either by the user selecting an item or
the user clearing the selection. Called with the item that was selected or
null
and the new state of downshift
. (see onStateChange
for more info on
stateAndHelpers
).
selectedItem
: The item that was just selected.null
if the selection was cleared.stateAndHelpers
: This is the same thing yourchildren
function is called with (see Children Function)
stateReducer
function(state: object, changes: object)
| optional
🚨 This is a really handy power feature 🚨
This function will be called each time downshift
sets its internal state (or
calls your onStateChange
handler for control props). It allows you to modify
the state change that will take place which can give you fine grain control over
how the component interacts with user updates without having to use
Control Props. It gives you the current state and the state
that will be set, and you return the state that you want to set.
state
: The full current state of downshift.changes
: These are the properties that are about to change. This also has atype
property which you can learn more about in thestateChangeTypes
section.
const ui = (
<Downshift stateReducer={stateReducer}>{/* your callback */}</Downshift>
)
function stateReducer(state, changes) {
// this prevents the menu from being closed when the user
// selects an item with a keyboard or mouse
switch (changes.type) {
case Downshift.stateChangeTypes.keyDownEnter:
case Downshift.stateChangeTypes.clickItem:
return {
...changes,
isOpen: state.isOpen,
highlightedIndex: state.highlightedIndex,
}
default:
return changes
}
}
NOTE: This is only called when state actually changes. You should not attempt to use this to handle events. If you wish to handle events, put your event handlers directly on the elements (make sure to use the prop getters though! For example:
<input onBlur={handleBlur} />
should be<input {...getInputProps({onBlur: handleBlur})} />
). Also, your reducer function should be "pure." This means it should do nothing other than return the state changes you want to have happen.
Advanced Props
initialSelectedItem
any
| defaults tonull
Pass an item or an array of items that should be selected when downshift is initialized.
initialInputValue
string
| defaults to''
This is the initial input value when downshift is initialized.
initialHighlightedIndex
number
/null
| defaults todefaultHighlightedIndex
This is the initial value to set the highlighted index to when downshift is initialized.
initialIsOpen
boolean
| defaults todefaultIsOpen
This is the initial isOpen
value when downshift is initialized.
defaultHighlightedIndex
number
/null
| defaults tonull
This is the value to set the highlightedIndex
to anytime downshift is reset,
when the selection is cleared, when an item is selected or when the inputValue
is changed.
defaultIsOpen
boolean
| defaults tofalse
This is the value to set the isOpen
to anytime downshift is reset, when the
the selection is cleared, or when an item is selected.
selectedItemChanged
function(prevItem: any, item: any)
| defaults to:(prevItem, item) => (prevItem !== item)
Used to determine if the new selectedItem
has changed compared to the previous
selectedItem
and properly update Downshift's internal state.
getA11yStatusMessage
function({/* see below */})
| default messages provided in English
This function is passed as props to a Status
component nested within and
allows you to create your own assertive ARIA statuses.
A default getA11yStatusMessage
function is provided that will check
resultCount
and return "No results are available." or if there are results ,
"resultCount
results are available, use up and down arrow keys to navigate.
Press Enter key to select."
The object you are passed to generate your status message has the following properties:
property | type | description |
---|---|---|
highlightedIndex |
number /null |
The currently highlighted index |
highlightedItem |
any |
The value of the highlighted item |
inputValue |
string |
The current input value |
isOpen |
boolean |
The isOpen state |
itemToString |
function(any) |
The itemToString function (see props) for getting the string value from one of the options |
previousResultCount |
number |
The total items showing in the dropdown the last time the status was updated |
resultCount |
number |
The total items showing in the dropdown |
selectedItem |
any |
The value of the currently selected item |
onSelect
function(selectedItem: any, stateAndHelpers: object)
| optional, no useful default
Called when the user selects an item, regardless of the previous selected item.
Called with the item that was selected and the new state of downshift
. (see
onStateChange
for more info on stateAndHelpers
).
selectedItem
: The item that was just selectedstateAndHelpers
: This is the same thing yourchildren
function is called with (see Children Function)
onStateChange
function(changes: object, stateAndHelpers: object)
| optional, no useful default
This function is called anytime the internal state changes. This can be useful
if you're using downshift as a "controlled" component, where you manage some or
all of the state (e.g., isOpen, selectedItem, highlightedIndex, etc) and then
pass it as props, rather than letting downshift control all its state itself.
The parameters both take the shape of internal state
({highlightedIndex: number, inputValue: string, isOpen: boolean, selectedItem: any}
)
but differ slightly.
changes
: These are the properties that actually have changed since the last state change. This also has atype
property which you can learn more about in thestateChangeTypes
section.stateAndHelpers
: This is the exact same thing yourchildren
function is called with (see Children Function)
Tip: This function will be called any time any state is changed. The best way to determine whether any particular state was changed, you can use
changes.hasOwnProperty('propName')
.
NOTE: This is only called when state actually changes. You should not attempt to use this to handle events. If you wish to handle events, put your event handlers directly on the elements (make sure to use the prop getters though! For example:
<input onBlur={handleBlur} />
should be<input {...getInputProps({onBlur: handleBlur})} />
).
onInputValueChange
function(inputValue: string, stateAndHelpers: object)
| optional, no useful default
Called whenever the input value changes. Useful to use instead or in combination
of onStateChange
when inputValue
is a controlled prop to
avoid issues with cursor positions.
inputValue
: The current value of the inputstateAndHelpers
: This is the same thing yourchildren
function is called with (see Children Function)
itemCount
number
| optional, defaults the number of times you call getItemProps
This is useful if you're using some kind of virtual listing component for
"windowing" (like
react-virtualized
).
highlightedIndex
number
| control prop (read more about this in the Control Props section)
The index that should be highlighted
inputValue
string
| control prop (read more about this in the Control Props section)
The value the input should have
isOpen
boolean
| control prop (read more about this in the Control Props section)
Whether the menu should be considered open or closed. Some aspects of the
downshift component respond differently based on this value (for example, if
isOpen
is true when the user hits "Enter" on the input field, then the item at
the highlightedIndex
item is selected).
selectedItem
any
/Array(any)
| control prop (read more about this in the Control Props section)
The currently selected item.
id
string
| defaults to a generated ID
You should not normally need to set this prop. It's only useful if you're server
rendering items (which each have an id
prop generated based on the downshift
id
). For more information see the FAQ
below.
inputId
string
| defaults to a generated ID
Used for aria
attributes and the id
prop of the element (input
) you use
getInputProps
with.
labelId
string
| defaults to a generated ID
Used for aria
attributes and the id
prop of the element (label
) you use
getLabelProps
with.
menuId
string
| defaults to a generated ID
Used for aria
attributes and the id
prop of the element (ul
) you use
getMenuProps
with.
getItemId
function(index)
| defaults to a function that generates an ID based on the index
Used for aria
attributes and the id
prop of the element (li
) you use
getInputProps
with.
environment
window
| defaults towindow
This prop is only useful if you're rendering downshift within a different
window
context from where your JavaScript is running; for example, an iframe
or a shadow-root. If the given context is lacking document
and/or
add|removeEventListener
on its prototype (as is the case for a shadow-root)
then you will need to pass in a custom object that is able to provide
access to these properties
for downshift.
onOuterClick
function(stateAndHelpers: object)
| optional
A helper callback to help control internal state of downshift like isOpen
as
mentioned in this issue.
The same behavior can be achieved using onStateChange
, but this prop is
provided as a helper because it's a fairly common use-case if you're controlling
the isOpen
state:
const ui = (
<Downshift
isOpen={this.state.menuIsOpen}
onOuterClick={() => this.setState({menuIsOpen: false})}
>
{/* your callback */}
</Downshift>
)
This callback will only be called if isOpen
is true
.
scrollIntoView
function(node: HTMLElement, menuNode: HTMLElement)
| defaults to internal implementation
This allows you to customize how the scrolling works when the highlighted index
changes. It receives the node to be scrolled to and the root node (the root node
you render in downshift). Internally we use
compute-scroll-into-view
so if you use that package then you wont be adding any additional bytes to your
bundle :)
stateChangeTypes
There are a few props that expose changes to state
(onStateChange
and stateReducer
). For you
to make the most of these APIs, it's important for you to understand why state
is being changed. To accomplish this, there's a type
property on the changes
object you get. This type
corresponds to a Downshift.stateChangeTypes
property.
The list of all possible values this type
property can take is defined in
this file
and is as follows:
Downshift.stateChangeTypes.unknown
Downshift.stateChangeTypes.mouseUp
Downshift.stateChangeTypes.itemMouseEnter
Downshift.stateChangeTypes.keyDownArrowUp
Downshift.stateChangeTypes.keyDownArrowDown
Downshift.stateChangeTypes.keyDownEscape
Downshift.stateChangeTypes.keyDownEnter
Downshift.stateChangeTypes.keyDownHome
Downshift.stateChangeTypes.keyDownEnd
Downshift.stateChangeTypes.clickItem
Downshift.stateChangeTypes.blurInput
Downshift.stateChangeTypes.changeInput
Downshift.stateChangeTypes.keyDownSpaceButton
Downshift.stateChangeTypes.clickButton
Downshift.stateChangeTypes.blurButton
Downshift.stateChangeTypes.controlledPropUpdatedSelectedItem
Downshift.stateChangeTypes.touchEnd
See stateReducer
for a concrete example on how to use the
type
property.
Control Props
downshift manages its own state internally and calls your onChange
and
onStateChange
handlers with any relevant changes. The state that downshift
manages includes: isOpen
, selectedItem
, inputValue
, and
highlightedIndex
. Your Children function (read more below) can be used to
manipulate this state and can likely support many of your use cases.
However, if more control is needed, you can pass any of these pieces of state as
a prop (as indicated above) and that state becomes controlled. As soon as
this.props[statePropKey] !== undefined
, internally, downshift
will determine
its state based on your prop's value rather than its own internal state. You
will be required to keep the state up to date (this is where onStateChange
comes in really handy), but you can also control the state from anywhere, be
that state from other components, redux
, react-router
, or anywhere else.
Note: This is very similar to how normal controlled components work elsewhere in react (like
<input />
). If you want to learn more about this concept, you can learn about that from this the Advanced React Component Patterns course
Children Function
This is where you render whatever you want to based on the state of downshift
.
You use it like so:
const ui = (
<Downshift>
{downshift => (
// use downshift utilities and state here, like downshift.isOpen,
// downshift.getInputProps, etc.
<div>{/* more jsx here */}</div>
)}
</Downshift>
)
The properties of this downshift
object can be split into three categories as
indicated below:
prop getters
NOTE: These prop-getters provide important
aria-
attributes which are very important to your component being accessible. It's recommended that you utilize these functions and apply the props they give you to your components.
These functions are used to apply props to the elements that you render. This
gives you maximum flexibility to render what, when, and wherever you like. You
call these on the element in question (for example:
<input {...getInputProps()}
)). It's advisable to pass all your props to that
function rather than applying them on the element yourself to avoid your props
being overridden (or overriding the props returned). For example:
getInputProps({onKeyUp(event) {console.log(event)}})
.
property | type | description |
---|---|---|
getToggleButtonProps |
function({}) |
returns the props you should apply to any menu toggle button element you render. |
getInputProps |
function({}) |
returns the props you should apply to the input element that you render. |
getItemProps |
function({}) |
returns the props you should apply to any menu item elements you render. |
getLabelProps |
function({}) |
returns the props you should apply to the label element that you render. |
getMenuProps |
function({},{}) |
returns the props you should apply to the ul element (or root of your menu) that you render. |
getRootProps |
function({},{}) |
returns the props you should apply to the root element that you render. It can be optional. |
getRootProps
Most of the time, you can just render a div
yourself and Downshift
will
apply the props it needs to do its job (and you don't need to call this
function). However, if you're rendering a composite component (custom component)
as the root element, then you'll need to call getRootProps
and apply that to
your root element (downshift will throw an error otherwise).
There are no required properties for this method.
Optional properties:
refKey
: if you're rendering a composite component, that component will need to accept a prop which it forwards to the root DOM element. Commonly, folks call thisinnerRef
. So you'd call:getRootProps({refKey: 'innerRef'})
and your composite component would forward like:<div ref={props.innerRef} />
. It defaults toref
.
If you're rendering a composite component, Downshift
checks that
getRootProps
is called and that refKey
is a prop of the returned composite
component. This is done to catch common causes of errors but, in some cases, the
check could fail even if the ref is correctly forwarded to the root DOM
component. In these cases, you can provide the object
{suppressRefError : true}
as the second argument to getRootProps
to
completely bypass the check.
Please use it with extreme care and only if you are absolutely sure that the ref
is correctly forwarded otherwise Downshift
will unexpectedly fail.
See #235 for the
discussion that lead to this.
getInputProps
This method should be applied to the input
you render. It is recommended that
you pass all props as an object to this method which will compose together any
of the event handlers you need to apply to the input
while preserving the ones
that downshift
needs to apply to make the input
behave.
There are no required properties for this method.
Optional properties:
-
disabled
: If this is set to true, then no event handlers will be returned fromgetInputProps
and adisabled
prop will be returned (effectively disabling the input). -
aria-label
: By default the menu will add anaria-labelledby
that refers to the<label>
rendered withgetLabelProps
. However, if you providearia-label
to give a more specific label that describes the options available, thenaria-labelledby
will not be provided and screen readers can use youraria-label
instead.
getLabelProps
This method should be applied to the label
you render. It is useful for
ensuring that the for
attribute on the <label>
(htmlFor
as a react prop)
is the same as the id
that appears on the input
. If no htmlFor
is provided
(the normal case) then an ID will be generated and used for the input
and the
label
for
attribute.
There are no required properties for this method.
Note: For accessibility purposes, calling this method is highly recommended.
getMenuProps
This method should be applied to the element which contains your list of items.
Typically, this will be a <div>
or a <ul>
that surrounds a map
expression.
This handles the proper ARIA roles and attributes.
Optional properties:
-
refKey
: if you're rendering a composite component, that component will need to accept a prop which it forwards to the root DOM element. Commonly, folks call thisinnerRef
. So you'd call:getMenuProps({refKey: 'innerRef'})
and your composite component would forward like:<ul ref={props.innerRef} />
. However, if you are just rendering a primitive component like<div>
, there is no need to specify this property. It defaults toref
.Please keep in mind that menus, for accessibility purposes, should always be rendered, regardless of whether you hide it or not. Otherwise,
getMenuProps
may throw error if you unmount and remount the menu. -
aria-label
: By default the menu will add anaria-labelledby
that refers to the<label>
rendered withgetLabelProps
. However, if you providearia-label
to give a more specific label that describes the options available, thenaria-labelledby
will not be provided and screen readers can use youraria-label
instead.
In some cases, you might want to completely bypass the refKey
check. Then you
can provide the object {suppressRefError : true}
as the second argument to
getMenuProps
. Please use it with extreme care and only if you are absolutely
sure that the ref is correctly forwarded otherwise Downshift
will unexpectedly
fail.
<ul {...getMenuProps()}>
{!isOpen
? null
: items.map((item, index) => (
<li {...getItemProps({item, index, key: item.id})}>{item.name}</li>
))}
</ul>
Note that for accessibility reasons it's best if you always render this element whether or not downshift is in an
isOpen
state.
getItemProps
The props returned from calling this function should be applied to any menu items you render.
This is an impure function, so it should only be called when you will actually be applying the props to an item.
Basically just don't do this:
items.map(item => {
const props = getItemProps({item}) // we're calling it here
if (!shouldRenderItem(item)) {
return null // but we're not using props, and downshift thinks we are...
}
return <div {...props} />
})
Instead, you could do this:
items.filter(shouldRenderItem).map(item => <div {...getItemProps({item})} />)
Required properties:
item
: this is the item data that will be selected when the user selects a particular item.
Optional properties:
index
: This is howdownshift
keeps track of your item when updating thehighlightedIndex
as the user keys around. By default,downshift
will assume theindex
is the order in which you're callinggetItemProps
. This is often good enough, but if you find odd behavior, try setting this explicitly. It's probably best to be explicit aboutindex
when using a windowing library likereact-virtualized
.disabled
: If this is set totrue
, then all of the downshift item event handlers will be omitted. Items will not be highlighted when hovered, and items will not be selected when clicked.
getToggleButtonProps
Call this and apply the returned props to a button
. It allows you to toggle
the Menu
component. You can definitely build something like this yourself (all
of the available APIs are exposed to you), but this is nice because it will also
apply all of the proper ARIA attributes.
Optional properties:
disabled
: If this is set totrue
, then all of the downshift button event handlers will be omitted (it wont toggle the menu when clicked).aria-label
: Thearia-label
prop is in English. You should probably override this yourself so you can provide translations:
const myButton = (
<button
{...getToggleButtonProps({
'aria-label': translateWithId(isOpen ? 'close.menu' : 'open.menu'),
})}
/>
)
actions
These are functions you can call to change the state of the downshift component.
property | type | description |
---|---|---|
clearSelection |
function(cb: Function) |
clears the selection |
clearItems |
function() |
Clears downshift's record of all the items. Only really useful if you render your items asynchronously within downshift. See #186 |
closeMenu |
function(cb: Function) |
closes the menu |
openMenu |
function(cb: Function) |
opens the menu |
selectHighlightedItem |
function(otherStateToSet: object, cb: Function) |
selects the item that is currently highlighted |
selectItem |
function(item: any, otherStateToSet: object, cb: Function) |
selects the given item |
selectItemAtIndex |
function(index: number, otherStateToSet: object, cb: Function) |
selects the item at the given index |
setHighlightedIndex |
function(index: number, otherStateToSet: object, cb: Function) |
call to set a new highlighted index |
toggleMenu |
function(otherStateToSet: object, cb: Function) |
toggle the menu open state |
reset |
function(otherStateToSet: object, cb: Function) |
this resets downshift's state to a reasonable default |
setItemCount |
function(count: number) |
this sets the itemCount . Handy in situations where you're using windowing and the items are loaded asynchronously from within downshift (so you can't use the itemCount prop. |
unsetItemCount |
function() |
this unsets the itemCount which means the item count will be calculated instead by the itemCount prop or based on how many times you call getItemProps . |
setState |
function(stateToSet: object, cb: Function) |
This is a general setState function. It uses downshift's internalSetState function which works with control props and calls your onSelect , onChange , etc. (Note, you can specify a type which you can reference in some other APIs like the stateReducer ). |
otherStateToSet
refers to an object to set other internal state. It is recommended to avoid abusing this, but is available if you need it.
state
These are values that represent the current state of the downshift component.
property | type | description |
---|---|---|
highlightedIndex |
number / null |
the currently highlighted item |
inputValue |
string / null |
the current value of the getInputProps input |
isOpen |
boolean |
the menu open state |
selectedItem |
any |
the currently selected item input |
props
As a convenience, the id
and itemToString
props which you pass to
<Downshift />
are available here as well.
Event Handlers
Downshift has a few events for which it provides implicit handlers. Several of
these handlers call event.preventDefault()
. Their additional functionality is
described below.
default handlers
-
ArrowDown
: if menu is closed, opens it and moves the highlighted index todefaultHighlightedIndex + 1
, ifdefaultHighlightedIndex
is provided, or to the top-most item, if not. If menu is open, it moves the highlighted index down by 1. If the shift key is held when this event fires, the highlighted index will jump down 5 indices instead of 1. NOTE: if the current highlighted index is within the bottom 5 indices, the top-most index will be highlighted.) -
ArrowUp
: if menu is closed, opens it and moves the highlighted index todefaultHighlightedIndex - 1
, ifdefaultHighlightedIndex
is provided, or to the bottom-most item, if not. If menu is open, moves the highlighted index up by 1. If the shift key is held when this event fires, the highlighted index will jump up 5 indices instead of 1. NOTE: if the current highlighted index is within the top 5 indices, the bottom-most index will be highlighted.) -
Home
: if menu is closed, it will not add any other behavior. If menu is open, the top-most index will get highlighted. -
End
: if menu is closed, it will not add any other behavior. If menu is open, the bottom-most index will get highlighted. -
Enter
: if the menu is open, selects the currently highlighted item. If the menu is open, the usual 'Enter' event is prevented by Downshift's default implicit enter handler; so, for example, a form submission event will not work as one might expect (though if the menu is closed the form submission will work normally). See below for customizing the handlers. -
Escape
: will clear downshift's state. This means thathighlightedIndex
will be set to thedefaultHighlightedIndex
and theisOpen
state will be set to thedefaultIsOpen
. IfisOpen
is already false, theinputValue
will be set to an empty string andselectedItem
will be set tonull
customizing handlers
You can provide your own event handlers to Downshift which will be called before the default handlers:
const ui = (
<Downshift>
{({getInputProps}) => (
<input
{...getInputProps({
onKeyDown: event => {
// your handler code
},
})}
/>
)}
</Downshift>
)
If you would like to prevent the default handler behavior in some cases, you can
set the event's preventDownshiftDefault
property to true
:
const ui = (
<Downshift>
{({getInputProps}) => (
<input
{...getInputProps({
onKeyDown: event => {
if (event.key === 'Enter') {
// Prevent Downshift's default 'Enter' behavior.
event.nativeEvent.preventDownshiftDefault = true
// your handler code
}
},
})}
/>
)}
</Downshift>
)
If you would like to completely override Downshift's behavior for a handler, in favor of your own, you can bypass prop getters:
const ui = (
<Downshift>
{({getInputProps}) => (
<input
{...getInputProps()}
onKeyDown={event => {
// your handler code
}}
/>
)}
</Downshift>
)
Utilities
resetIdCounter
Allows reseting the internal id counter which is used to generate unique ids for Downshift component.
This is unnecessary if you are using React 18 or newer
You should never need to use this in the browser. Only if you are running an universal React app that is rendered on the server you should call resetIdCounter before every render so that the ids that get generated on the server match the ids generated in the browser.
import {resetIdCounter} from 'downshift';
resetIdCounter()
ReactDOMServer.renderToString(...);
React Native
Since Downshift renders it's UI using render props, Downshift supports rendering
on React Native with ease. Use components like <View>
, <Text>
,
<TouchableOpacity>
and others inside of your render method to generate awesome
autocomplete, dropdown, or selection components.
Gotchas
- Your root view will need to either pass a ref to
getRootProps
or callgetRootProps
with{ suppressRefError: true }
. This ref is used to catch a common set of errors around composite components. Learn more ingetRootProps
. - When using a
<FlatList>
or<ScrollView>
, be sure to supply thekeyboardShouldPersistTaps
prop to ensure that your text input stays focus, while allowing for taps on the touchables rendered for your items.
Advanced React Component Patterns course
Kent C. Dodds has created learning material based on the patterns implemented in this component. You can find it on various platforms:
- egghead.io
- Frontend Masters
- YouTube (for free!): Part 1 and Part 2
Examples
🚨 We're in the process of moving all examples to the downshift-examples repo (which you can open, interact with, and contribute back to live on codesandbox)
🚨 We're also in the process of updating our examples from the downshift-docs repo which is actually used to create our docsite at downshift-js.com). Make sure to check it out for the most relevant Downshift examples or try out the new hooks that aim to replace Downshift.
Ordered Examples:
If you're just learning downshift, review these in order:
- basic automplete with getRootProps - the same as example #1 but using the correct HTML structure as suggested by ARIA-WCAG.
- basic autocomplete - very bare bones, not styled at all. Good place to start.
- styled autocomplete - more complete autocomplete solution using emotion for styling and match-sorter for filtering the items.
- typeahead -
Shows how to control the
selectedItem
so the selected item can be one of your items or whatever the user types. - multi-select - Shows how to create a MultiDownshift component that allows for an array of selectedItems for multiple selection using a state reducer
Other Examples:
Check out these examples of more advanced use/edge cases:
- dropdown with select by key - An example of using the render prop pattern to utilize a reusable component to provide the downshift dropdown component with the functionality of being able to highlight a selection item that starts with the key pressed.
- using actions - An example of using one of downshift's actions as an event handler.
- gmail's composition recipients field - An example of a highly complex autocomplete component featuring asynchronously loading items, multiple selection, and windowing (with react-virtualized)
- Downshift HOC and Compound Components -
An example of how to implementat compound components with
React.createContext
and a downshift higher order component. This is generally not recommended because the render prop API exported by downshift is generally good enough for everyone, but there's nothing technically wrong with doing something like this.
Old Examples exist on codesandbox.io:
🚨 This is a great contribution opportunity! These are examples that have not yet been migrated to downshift-examples. You're more than welcome to make PRs to the examples repository to move these examples over there. Watch this to learn how to contribute completely in the browser
- Integration with Apollo
- Integration with Redux
- Integration with
react-instantsearch
from Algolia - Material-UI (1.0.0-beta.4) Combobox Using Downshift
- Material-UI (1.0.0-beta.33) Multiple select with autocomplete
- Integration with
GenieJS
(learn more aboutgenie
here) - Handling and displaying errors
- Integration with React Router
- Windowing with
react-tiny-virtual-list
- Section/option group example
- Integration with
fuzzaldrin-plus
(Fuzzy matching) - Dropdown/select implementation with Bootstrap
- Multiple editable tag selection
- Downshift implemented as compound components and a Higher Order Component
(exposes a
withDownshift
higher order component which you can use to get at the state, actions, prop getters in a rendered downshift tree). - Downshift Spectre.css example
- Integration with
redux-form
- Integration with
react-final-form
- Provider Pattern - how to avoid prop-drilling if you like to break up your render method into more components
- React Native example
- React VR example
- Multiple checkbox selection
FAQ
The checksum error you're seeing is most likely due to the automatically
generated id
and/or htmlFor
prop you get from getInputProps
and
getLabelProps
(respectively). It could also be from the automatically
generated id
prop you get from getItemProps
(though this is not likely as
you're probably not rendering any items when rendering a downshift component on
the server).
To avoid these problems, simply call resetIdCounter before
ReactDOM.renderToString
.
Alternatively you could provide your own ids via the id props where you render
<Downshift />
:
const ui = (
<Downshift
id="autocomplete"
labelId="autocomplete-label"
inputId="autocomplete-input"
menuId="autocomplete-menu"
>
{({getInputProps, getLabelProps}) => <div>{/* your UI */}</div>}
</Downshift>
)
Inspiration
I was heavily inspired by Ryan Florence. Watch his (free) lesson about "Compound Components". Initially downshift was a group of compound components using context to communicate. But then Jared Forsyth suggested I expose functions (the prop getters) to get props to apply to the elements rendered. That bit of inspiration made a big impact on the flexibility and simplicity of this API.
I also took a few ideas from the code in
react-autocomplete
and jQuery UI's
Autocomplete.
You can watch me build the first iteration of downshift
on YouTube:
You'll find more recordings of me working on downshift
on my livestream
YouTube playlist.
Other Solutions
You can implement these other solutions using downshift
, but if you'd prefer
to use these out of the box solutions, then that's fine too:
Bindings for ReasonML
If you're developing some React in ReasonML, check out the
Downshift
bindings for
that.
Contributors
Thanks goes to these people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
LICENSE
MIT
More Resourcesto explore the angular.
mail [email protected] to add your project or resources here 🔥.
- 1React Community – React
https://react.dev/community
The library for web and native user interfaces
- 2Patterns.dev
https://www.patterns.dev/
Learn JavaScript design and performance patterns for building more powerful web applications.
- 3React
https://react.dev/
React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.
- 4Quick Start – React
https://react.dev/learn
The library for web and native user interfaces
- 5Snack - React Native in the browser
https://snack.expo.dev/
Write code in Expo's online editor and instantly use it on your phone.
- 6React JavaScript Tutorial in Visual Studio Code
https://code.visualstudio.com/docs/nodejs/reactjs-tutorial
React JavaScript tutorial showing IntelliSense, debugging, and code navigation support in the Visual Studio Code editor.
- 7Overview · React Native
https://reactnative.dev/community/overview
The React Native Community
- 8React Native · Learn once, write anywhere
https://reactnative.dev/
A framework for building native apps using React
- 9React Conferences – React
https://react.dev/community/conferences
The library for web and native user interfaces
- 10React - CodeSandbox
https://codesandbox.io/s/new
React example starter project
- 11React friendly API wrapper around MapboxGL JS
https://github.com/visgl/react-map-gl
React friendly API wrapper around MapboxGL JS. Contribute to visgl/react-map-gl development by creating an account on GitHub.
- 12React components for Leaflet maps
https://github.com/PaulLeCam/react-leaflet
React components for Leaflet maps. Contribute to PaulLeCam/react-leaflet development by creating an account on GitHub.
- 13The visual editor for React
https://github.com/measuredco/puck
The visual editor for React. Contribute to measuredco/puck development by creating an account on GitHub.
- 14👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB)
https://github.com/mkosir/react-parallax-tilt
👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB) - mkosir/react-parallax-tilt
- 15Fast, easy and reliable testing for anything that runs in a browser.
https://github.com/cypress-io/cypress
Fast, easy and reliable testing for anything that runs in a browser. - cypress-io/cypress
- 16🇨🇭 A React renderer for Three.js
https://github.com/pmndrs/react-three-fiber
🇨🇭 A React renderer for Three.js. Contribute to pmndrs/react-three-fiber development by creating an account on GitHub.
- 17Create skeleton screens that automatically adapt to your app!
https://github.com/dvtng/react-loading-skeleton
Create skeleton screens that automatically adapt to your app! - dvtng/react-loading-skeleton
- 18Open source, production-ready animation and gesture library for React
https://github.com/framer/motion
Open source, production-ready animation and gesture library for React - framer/motion
- 19The recommended Code Splitting library for React ✂️✨
https://github.com/gregberge/loadable-components
The recommended Code Splitting library for React ✂️✨ - gregberge/loadable-components
- 20A collection of composable React components for building interactive data visualizations
https://github.com/FormidableLabs/victory
A collection of composable React components for building interactive data visualizations - FormidableLabs/victory
- 21TW Elements integration with React - Free Examples & Tutorial
https://tw-elements.com/docs/standard/integrations/react-integration/
This article shows you how to integrate React application with TW Elements. Free download, open source license.
- 22🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering.
https://github.com/TanStack/router
🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router
- 23🎥 Make videos programmatically with React
https://github.com/remotion-dev/remotion
🎥 Make videos programmatically with React. Contribute to remotion-dev/remotion development by creating an account on GitHub.
- 24The HTML touch slider carousel with the most native feeling you will get.
https://github.com/rcbyr/keen-slider
The HTML touch slider carousel with the most native feeling you will get. - rcbyr/keen-slider
- 25A JS library for predictable global state management
https://github.com/reduxjs/redux
A JS library for predictable global state management - reduxjs/redux
- 26Simple reusable React error boundary component
https://github.com/bvaughn/react-error-boundary
Simple reusable React error boundary component. Contribute to bvaughn/react-error-boundary development by creating an account on GitHub.
- 27Declarative routing for React
https://github.com/remix-run/react-router
Declarative routing for React. Contribute to remix-run/react-router development by creating an account on GitHub.
- 28Personal blog by Dan Abramov.
https://github.com/gaearon/overreacted.io
Personal blog by Dan Abramov. Contribute to gaearon/overreacted.io development by creating an account on GitHub.
- 29Next generation frontend tooling. It's fast!
https://github.com/vitejs/vite
Next generation frontend tooling. It's fast! Contribute to vitejs/vite development by creating an account on GitHub.
- 30React Hooks for Data Fetching
https://github.com/vercel/swr
React Hooks for Data Fetching. Contribute to vercel/swr development by creating an account on GitHub.
- 31📄 Create PDF files using React
https://github.com/diegomura/react-pdf
📄 Create PDF files using React. Contribute to diegomura/react-pdf development by creating an account on GitHub.
- 32nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://github.com/plouc/nivo
nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries - plouc/nivo
- 33Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.
https://github.com/facebookexperimental/Recoil
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features o...
- 34[ARCHIVE]: Expo Router has moved to expo/expo -- The File-based router for universal React Native apps
https://github.com/expo/router
[ARCHIVE]: Expo Router has moved to expo/expo -- The File-based router for universal React Native apps - expo/router
- 35🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.
https://github.com/alan2207/bulletproof-react
🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications. - GitHub - alan2207/bulletproof-react: 🛡️ ⚛️ A simple, scalable, and powerful architecture for...
- 36The Select Component for React.js
https://github.com/JedWatson/react-select
The Select Component for React.js. Contribute to JedWatson/react-select development by creating an account on GitHub.
- 37Toolkit for building accessible web apps with React
https://github.com/ariakit/ariakit
Toolkit for building accessible web apps with React - ariakit/ariakit
- 38Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
https://github.com/styled-components/styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 - styled-components/styled-components
- 39Create the next immutable state by mutating the current one
https://github.com/immerjs/immer
Create the next immutable state by mutating the current one - immerjs/immer
- 40An open-source, cross-platform terminal for seamless workflows
https://github.com/wavetermdev/waveterm
An open-source, cross-platform terminal for seamless workflows - wavetermdev/waveterm
- 41Isolated React component development environment with a living style guide
https://github.com/styleguidist/react-styleguidist
Isolated React component development environment with a living style guide - styleguidist/react-styleguidist
- 42🐯 visx | visualization components
https://github.com/airbnb/visx
🐯 visx | visualization components. Contribute to airbnb/visx development by creating an account on GitHub.
- 43Build forms in React, without the tears 😭
https://github.com/jaredpalmer/formik
Build forms in React, without the tears 😭 . Contribute to jaredpalmer/formik development by creating an account on GitHub.
- 44Routing and navigation for your React Native apps
https://github.com/react-navigation/react-navigation
Routing and navigation for your React Native apps. Contribute to react-navigation/react-navigation development by creating an account on GitHub.
- 45The library for web and native user interfaces.
https://github.com/facebook/react
The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.
- 46🏹 Draw arrows between React elements 🖋
https://github.com/pierpo/react-archer
🏹 Draw arrows between React elements 🖋. Contribute to pierpo/react-archer development by creating an account on GitHub.
- 47The React Framework
https://github.com/vercel/next.js
The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.
- 48Winamp 2 reimplemented for the browser
https://github.com/captbaritone/webamp
Winamp 2 reimplemented for the browser. Contribute to captbaritone/webamp development by creating an account on GitHub.
- 49The best React-based framework with performance, scalability and security built in.
https://github.com/gatsbyjs/gatsby
The best React-based framework with performance, scalability and security built in. - gatsbyjs/gatsby
- 50Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.
https://github.com/reactjs/react-rails
Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker. - reactjs/react-rails
- 51The monorepo home to all of the FormatJS related libraries, most notably react-intl.
https://github.com/formatjs/formatjs
The monorepo home to all of the FormatJS related libraries, most notably react-intl. - formatjs/formatjs
- 52Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://github.com/microsoft/fluentui
Fluent UI web represents a collection of utilities, React components, and web components for building web applications. - microsoft/fluentui
- 53🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
https://github.com/TanStack/query
🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - TanStack/query
- 54Simple, scalable state management.
https://github.com/mobxjs/mobx
Simple, scalable state management. Contribute to mobxjs/mobx development by creating an account on GitHub.
- 55A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.
https://github.com/formkit/auto-animate
A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. - formkit/auto-animate
- 56Build Better Websites. Create modern, resilient user experiences with web fundamentals.
https://github.com/remix-run/remix
Build Better Websites. Create modern, resilient user experiences with web fundamentals. - remix-run/remix
- 57svg react icons of popular icon packs
https://github.com/react-icons/react-icons
svg react icons of popular icon packs. Contribute to react-icons/react-icons development by creating an account on GitHub.
- 58👩🎤 CSS-in-JS library designed for high performance style composition
https://github.com/emotion-js/emotion
👩🎤 CSS-in-JS library designed for high performance style composition - emotion-js/emotion
- 59Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://github.com/shadcn-ui/ui
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. - shadcn-ui/ui
- 60:rocket: A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
https://github.com/apollographql/apollo-client
:rocket: A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server. - apollographql/apollo-client
- 61Vest ✅ Declarative validations framework
https://github.com/ealush/vest
Vest ✅ Declarative validations framework. Contribute to ealush/vest development by creating an account on GitHub.
- 62Set up a modern web app by running one command.
https://github.com/facebook/create-react-app
Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an account on GitHub.
- 63A React component for Instagram like stories
https://github.com/mohitk05/react-insta-stories
A React component for Instagram like stories. Contribute to mohitk05/react-insta-stories development by creating an account on GitHub.
- 64❤️ A heart-shaped toggle switch component for React.
https://github.com/anatoliygatt/heart-switch
❤️ A heart-shaped toggle switch component for React. - anatoliygatt/heart-switch
- 65why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.)
https://github.com/welldone-software/why-did-you-render
why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.) - welldone-software/why-did-you-render
- 66Relay is a JavaScript framework for building data-driven React applications.
https://github.com/facebook/relay
Relay is a JavaScript framework for building data-driven React applications. - facebook/relay
- 67The Fullstack Tutorial for GraphQL
https://github.com/howtographql/howtographql
The Fullstack Tutorial for GraphQL. Contribute to howtographql/howtographql development by creating an account on GitHub.
- 68The compiler for ReScript.
https://github.com/rescript-lang/rescript-compiler
The compiler for ReScript. Contribute to rescript-lang/rescript-compiler development by creating an account on GitHub.
- 69A JavaScript library to position floating elements and create interactions for them.
https://github.com/floating-ui/floating-ui
A JavaScript library to position floating elements and create interactions for them. - floating-ui/floating-ui
- 70Data Visualization Components
https://github.com/uber/react-vis
Data Visualization Components. Contribute to uber/react-vis development by creating an account on GitHub.
- 71The lightweight and flexible Cookie Consent Banner
https://github.com/porscheofficial/cookie-consent-banner
The lightweight and flexible Cookie Consent Banner - porscheofficial/cookie-consent-banner
- 72Sandbox for developing and testing UI components in isolation
https://github.com/react-cosmos/react-cosmos
Sandbox for developing and testing UI components in isolation - react-cosmos/react-cosmos
- 73📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3
https://github.com/alibaba/formily
📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3 - alibaba/formily
- 74fast, portable, and extensible cmd+k interface for your site
https://github.com/timc1/kbar
fast, portable, and extensible cmd+k interface for your site - timc1/kbar
- 75The zero configuration build tool for the web. 📦🚀
https://github.com/parcel-bundler/parcel
The zero configuration build tool for the web. 📦🚀. Contribute to parcel-bundler/parcel development by creating an account on GitHub.
- 76A library for development of single-page full-stack web applications in clj/cljs
https://github.com/fulcrologic/fulcro
A library for development of single-page full-stack web applications in clj/cljs - fulcrologic/fulcro
- 77🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
https://github.com/TanStack/table
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table - TanStack/table
- 78💬 The most complete chat UI for React Native
https://github.com/FaridSafi/react-native-gifted-chat
💬 The most complete chat UI for React Native. Contribute to FaridSafi/react-native-gifted-chat development by creating an account on GitHub.
- 79Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop
https://github.com/lukasbach/react-complex-tree
Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop - lukasbach/react-complex-tree
- 80✌️ A spring physics based React animation library
https://github.com/pmndrs/react-spring
✌️ A spring physics based React animation library. Contribute to pmndrs/react-spring development by creating an account on GitHub.
- 81Redefined chart library built with React and D3
https://github.com/recharts/recharts
Redefined chart library built with React and D3. Contribute to recharts/recharts development by creating an account on GitHub.
- 82Bootstrap components built with React
https://github.com/react-bootstrap/react-bootstrap
Bootstrap components built with React. Contribute to react-bootstrap/react-bootstrap development by creating an account on GitHub.
- 83🐻 Bear necessities for state management in React
https://github.com/pmndrs/zustand
🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub.
- 84A framework for building native applications using React
https://github.com/facebook/react-native
A framework for building native applications using React - facebook/react-native
- 85📋 React Hooks for form state management and validation (Web + React Native)
https://github.com/react-hook-form/react-hook-form
📋 React Hooks for form state management and validation (Web + React Native) - react-hook-form/react-hook-form
- 86A build system for development of composable software.
https://github.com/teambit/bit
A build system for development of composable software. - teambit/bit
- 87👻 Primitive and flexible state management for React
https://github.com/pmndrs/jotai
👻 Primitive and flexible state management for React - pmndrs/jotai
- 88Your window into the Elastic Stack
https://github.com/elastic/kibana
Your window into the Elastic Stack. Contribute to elastic/kibana development by creating an account on GitHub.
- 89A <QRCode/> component for use with React.
https://github.com/zpao/qrcode.react
A <QRCode/> component for use with React. Contribute to zpao/qrcode.react development by creating an account on GitHub.
- 90Realm is a mobile database: an alternative to SQLite & key-value stores
https://github.com/realm/realm-js
Realm is a mobile database: an alternative to SQLite & key-value stores - realm/realm-js
- 91Internationalization for react done right. Using the i18next i18n ecosystem.
https://github.com/i18next/react-i18next
Internationalization for react done right. Using the i18next i18n ecosystem. - i18next/react-i18next
- 92Optimize React performance and make your React 70% faster in minutes, not months.
https://github.com/aidenybai/million
Optimize React performance and make your React 70% faster in minutes, not months. - GitHub - aidenybai/million: Optimize React performance and make your React 70% faster in minutes, not months.
- 93A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
https://github.com/refinedev/refine
A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. - refinedev/refine
- 94⚛️ A React renderer for Figma
https://github.com/react-figma/react-figma
⚛️ A React renderer for Figma. Contribute to react-figma/react-figma development by creating an account on GitHub.
- 95A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design
https://github.com/marmelab/react-admin
A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design - marmelab/react-admin
- 96gcal/outlook like calendar component
https://github.com/jquense/react-big-calendar
gcal/outlook like calendar component. Contribute to jquense/react-big-calendar development by creating an account on GitHub.
- 97Expo
https://expo.dev/
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
- 98Feature-rich and customizable data grid React component
https://github.com/adazzle/react-data-grid
Feature-rich and customizable data grid React component - adazzle/react-data-grid
- 99Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://github.com/mui/material-ui
Material UI: Comprehensive React component library that implements Google's Material Design. Free forever. - mui/material-ui
- 100⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
https://github.com/preactjs/preact
⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM. - preactjs/preact
- 101A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects.
https://github.com/ivanhofer/typesafe-i18n
A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects. - ivanhofer/typesafe-i18n
- 102Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://github.com/storybookjs/storybook
Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation - storybookjs/storybook
- 103Immutable persistent data collections for Javascript which increase efficiency and simplicity.
https://github.com/immutable-js/immutable-js
Immutable persistent data collections for Javascript which increase efficiency and simplicity. - immutable-js/immutable-js
- 104Modern file uploading - components & hooks for React
https://github.com/rpldy/react-uploady
Modern file uploading - components & hooks for React - rpldy/react-uploady
- 105Actor-based state management & orchestration for complex app logic.
https://github.com/statelyai/xstate
Actor-based state management & orchestration for complex app logic. - statelyai/xstate
- 106🐐 Simple and complete React DOM testing utilities that encourage good testing practices.
https://github.com/testing-library/react-testing-library
🐐 Simple and complete React DOM testing utilities that encourage good testing practices. - testing-library/react-testing-library
- 107An enterprise-class UI design language and React UI library
https://github.com/ant-design/ant-design
An enterprise-class UI design language and React UI library - ant-design/ant-design
- 108A fast, local first, reactive Database for JavaScript Applications https://rxdb.info/
https://github.com/pubkey/rxdb
A fast, local first, reactive Database for JavaScript Applications https://rxdb.info/ - pubkey/rxdb
- 109Most modern mobile touch slider with hardware accelerated transitions
https://github.com/nolimits4web/swiper
Most modern mobile touch slider with hardware accelerated transitions - nolimits4web/swiper
- 110⚡️ The Missing Fullstack Toolkit for Next.js
https://github.com/blitz-js/blitz
⚡️ The Missing Fullstack Toolkit for Next.js. Contribute to blitz-js/blitz development by creating an account on GitHub.
- 111Full featured HTML framework for building iOS & Android apps
https://github.com/framework7io/framework7
Full featured HTML framework for building iOS & Android apps - framework7io/framework7
- 112A simple and reusable datepicker component for React
https://github.com/Hacker0x01/react-datepicker/
A simple and reusable datepicker component for React - Hacker0x01/react-datepicker
- 113🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
https://github.com/yairEO/tagify
🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue - yairEO/tagify
- 114Zero-runtime CSS in JS library
https://github.com/callstack/linaria
Zero-runtime CSS in JS library. Contribute to callstack/linaria development by creating an account on GitHub.
- 115🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
https://github.com/downshift-js/downshift
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. - downshift-js/downshift
- 116🥢 A minimalist-friendly ~2.1KB routing for React and Preact
https://github.com/molefrog/wouter
🥢 A minimalist-friendly ~2.1KB routing for React and Preact - molefrog/wouter
- 117A draggable and resizable grid layout with responsive breakpoints, for React.
https://github.com/react-grid-layout/react-grid-layout
A draggable and resizable grid layout with responsive breakpoints, for React. - react-grid-layout/react-grid-layout
- 118Customizable Icons for React Native with support for image source and full styling.
https://github.com/oblador/react-native-vector-icons
Customizable Icons for React Native with support for image source and full styling. - oblador/react-native-vector-icons
- 119A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.
https://github.com/skellock/reactotron
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows. - infinitered/reactotron
- 120A React component for building Web forms from JSON Schema.
https://github.com/mozilla-services/react-jsonschema-form
A React component for building Web forms from JSON Schema. - rjsf-team/react-jsonschema-form
- 121Mattermost is an open source platform for secure collaboration across the entire software development lifecycle..
https://github.com/mattermost/mattermost-server
Mattermost is an open source platform for secure collaboration across the entire software development lifecycle.. - mattermost/mattermost
- 122Zero-runtime Stylesheets-in-TypeScript
https://github.com/seek-oss/vanilla-extract
Zero-runtime Stylesheets-in-TypeScript. Contribute to vanilla-extract-css/vanilla-extract development by creating an account on GitHub.
- 123Delightful JavaScript Testing.
https://github.com/facebook/jest
Delightful JavaScript Testing. Contribute to jestjs/jest development by creating an account on GitHub.
- 124Curated List of React Components & Libraries.
https://github.com/brillout/awesome-react-components
Curated List of React Components & Libraries. Contribute to brillout/awesome-react-components development by creating an account on GitHub.
- 125Business logic with ease ☄️
https://github.com/zerobias/effector
Business logic with ease ☄️. Contribute to effector/effector development by creating an account on GitHub.
- 126React-specific linting rules for ESLint
https://github.com/yannickcr/eslint-plugin-react
React-specific linting rules for ESLint. Contribute to jsx-eslint/eslint-plugin-react development by creating an account on GitHub.
- 127🌈 React for interactive command-line apps
https://github.com/vadimdemedes/ink
🌈 React for interactive command-line apps. Contribute to vadimdemedes/ink development by creating an account on GitHub.
- 128tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
https://github.com/matteobruni/tsparticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use compon...
- 129Device Information for React Native iOS and Android
https://github.com/react-native-device-info/react-native-device-info
Device Information for React Native iOS and Android - react-native-device-info/react-native-device-info
- 130List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!!
https://github.com/sudheerj/reactjs-interview-questions
List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!! - sudheerj/reactjs-interview-questions
- 131Cheatsheets for experienced React developers getting started with TypeScript
https://github.com/typescript-cheatsheets/react-typescript-cheatsheet
Cheatsheets for experienced React developers getting started with TypeScript - typescript-cheatsheets/react
- 132babel-relay-plugin
https://www.npmjs.com/package/babel-relay-plugin
Babel Relay Plugin for transpiling GraphQL queries for use with Relay.. Latest version: 0.11.0, last published: 8 years ago. Start using babel-relay-plugin in your project by running `npm i babel-relay-plugin`. There are 73 other projects in the npm registry using babel-relay-plugin.
- 133598fa75e22bdfa44cf47
https://gist.github.com/wincent/598fa75e22bdfa44cf47
GitHub Gist: instantly share code, notes, and snippets.
- 134eyston/relay-composite-network-layer
https://github.com/eyston/relay-composite-network-layer
Contribute to eyston/relay-composite-network-layer development by creating an account on GitHub.
- 135Relay TodoMVC with routing
https://github.com/taion/relay-todomvc
Relay TodoMVC with routing. Contribute to taion/relay-todomvc development by creating an account on GitHub.
- 136Sangria Relay Support
https://github.com/sangria-graphql/sangria-relay
Sangria Relay Support. Contribute to sangria-graphql/sangria-relay development by creating an account on GitHub.
- 137Bringing Modern Web Techniques to Mobile
https://www.youtube.com/watch?v=X6YbAKiLCLU
As we introduce React Native & Relay, learn how we use JavaScript libraries and techniques to help our engineers develop great mobile experiences ever more e...
- 138Use Relay to fetch and store data outside of a React component
https://github.com/acdlite/relay-sink
Use Relay to fetch and store data outside of a React component - acdlite/relay-sink
- 139Use Relay without a GraphQL server
https://github.com/relay-tools/relay-local-schema
Use Relay without a GraphQL server. Contribute to relay-tools/relay-local-schema development by creating an account on GitHub.
- 140Relay + GraphQL + React on Rails
https://github.com/nethsix/relay-on-rails
Relay + GraphQL + React on Rails. Contribute to nethsix/relay-on-rails development by creating an account on GitHub.
- 141React, Relay, GraphQL project skeleton
https://github.com/fortruce/relay-skeleton
React, Relay, GraphQL project skeleton. Contribute to fortruce/relay-skeleton development by creating an account on GitHub.
- 142react-native and relay working out of the box
https://github.com/lenaten/react-native-relay
react-native and relay working out of the box. Contribute to lenaten/react-native-relay development by creating an account on GitHub.
- 143Babel plugin which converts Flow types into Relay fragments
https://github.com/guymers/babel-plugin-flow-relay-query
Babel plugin which converts Flow types into Relay fragments - guymers/babel-plugin-flow-relay-query
- 144:point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS
https://github.com/lvarayut/relay-fullstack
:point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS - lvarayut/relay-fullstack
- 145A Go/Golang library to help construct a graphql-go server supporting react-relay.
https://github.com/graphql-go/relay
A Go/Golang library to help construct a graphql-go server supporting react-relay. - graphql-go/relay
- 146React/Relay TodoMVC app, driven by a Golang GraphQL backend
https://github.com/sogko/todomvc-relay-go
React/Relay TodoMVC app, driven by a Golang GraphQL backend - sogko/todomvc-relay-go
- 147Adds server side rendering support to react-router-relay
https://github.com/denvned/isomorphic-relay-router
Adds server side rendering support to react-router-relay - denvned/isomorphic-relay-router
- 148Light, Electron-based Wrapper around GraphiQL
https://github.com/skevy/graphiql-app
Light, Electron-based Wrapper around GraphiQL. Contribute to skevy/graphiql-app development by creating an account on GitHub.
- 149relay-nested-routes
https://www.npmjs.com/package/relay-nested-routes
Nested react-router views for Relay. Latest version: 0.3.1, last published: 9 years ago. Start using relay-nested-routes in your project by running `npm i relay-nested-routes`. There are no other projects in the npm registry using relay-nested-routes.
- 150recompose-relay
https://www.npmjs.com/package/recompose-relay
Recompose helpers for Relay.. Latest version: 0.3.1, last published: 8 years ago. Start using recompose-relay in your project by running `npm i recompose-relay`. There are no other projects in the npm registry using recompose-relay.
- 151Todo example for koa-graphql and relay
https://github.com/chentsulin/koa-graphql-relay-example
Todo example for koa-graphql and relay. Contribute to chentsulin/koa-graphql-relay-example development by creating an account on GitHub.
- 152Utility decorators for Relay components
https://github.com/4Catalyzer/relay-decorators
Utility decorators for Relay components. Contribute to 4Catalyzer/relay-decorators development by creating an account on GitHub.
- 153Build software better, together
https://github.com/relayjs/relay-starter-kit.
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
- 154A very simple starter for React Relay using Browserify
https://github.com/mhart/simple-relay-starter
A very simple starter for React Relay using Browserify - mhart/simple-relay-starter
- 155A thin wrapper for sequelize and graphql-relay
https://github.com/MattMcFarland/sequelize-relay
A thin wrapper for sequelize and graphql-relay. Contribute to MattMcFarland/sequelize-relay development by creating an account on GitHub.
- 156Build software better, together
https://github.com/sequelize/sequelize.
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
- 157A library to help construct a graphql-js server supporting react-relay.
https://github.com/graphql/graphql-relay-js
A library to help construct a graphql-js server supporting react-relay. - graphql/graphql-relay-js
- 158[Deprecated] Relay Classic integration for React Router
https://github.com/relay-tools/react-router-relay
[Deprecated] Relay Classic integration for React Router - relay-tools/react-router-relay
- 159GraphiQL & the GraphQL LSP Reference Ecosystem for building browser & IDE tools.
https://github.com/graphql/graphiql
GraphiQL & the GraphQL LSP Reference Ecosystem for building browser & IDE tools. - graphql/graphiql
- 160A library to help construct a graphql-py server supporting react-relay
https://github.com/graphql-python/graphql-relay-py
A library to help construct a graphql-py server supporting react-relay - graphql-python/graphql-relay-py
- 161Facebook Relay talk - Lunch and Learn session
https://www.youtube.com/watch?v=sP3n-nht0Xo
Talk and live demo of Facebook Relay goodness, with a touch of CSS modules and PostCSS. Presented by Albert Still and Alex Savin
- 162An Application Framework For React at react-europe 2015
https://www.youtube.com/watch?v=IrgHurBjQbg
Relay is a new framework from Facebook that enables declarative data fetching & updates for React applications. Relay components use GraphQL to specify their...
- 163Barebones starting point for a Relay application.
https://github.com/relayjs/relay-starter-kit
Barebones starting point for a Relay application. Contribute to facebookarchive/relay-starter-kit development by creating an account on GitHub.
- 164Seamless Syncing for React (VanJS)
http://www.slideshare.net/BrooklynZelenka/relay-seamless-syncing-for-react-vanjs
Relay: Seamless Syncing for React (VanJS) - Download as a PDF or view online for free
- 165Relay - Daniel Dembach - Hamburg React.js Meetup
https://www.youtube.com/watch?v=dvWTxy1eY6s
A recording taken during the meetup of the react.js hamburg group:http://www.meetup.com/Hamburg-React-js-Meetup/events/225186254/
- 166Build software better, together
https://github.com/rmosolgo/graphql-relay-ruby
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
- 167Build software better, together
https://github.com/graphql/graphiql.
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
- 168an chat example showing Relay with routing and pagination
https://github.com/transedward/relay-chat
an chat example showing Relay with routing and pagination - hungtuchen/relay-chat
- 169Create Relay connections from MongoDB cursors
https://github.com/mikberg/relay-mongodb-connection
Create Relay connections from MongoDB cursors. Contribute to heysailor/relay-mongodb-connection development by creating an account on GitHub.
- 170Build software better, together
https://github.com/codefoundries/UniversalRelayBoilerplate
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
- 171Getting Started with Relay
https://auth0.com/blog/2015/10/06/getting-started-with-relay/
Learn how to get started with a Relay app and how to protect the GraphQL endpoint with JWT authentication.
- 172💥 Monorepo template (seed project) pre-configured with GraphQL API, PostgreSQL, React, and Joy UI.
https://github.com/kriasoft/nodejs-api-starter
💥 Monorepo template (seed project) pre-configured with GraphQL API, PostgreSQL, React, and Joy UI. - kriasoft/graphql-starter-kit
- 173React with Relay and GraphQL with Andrew Smith
https://www.youtube.com/watch?v=Cfna8gwt9h8
Andrew Smith presents GraphQL in relation to React and Relay.
- 174ReactRelayNetworkLayer with middlewares and query batching for Relay Classic.
https://github.com/nodkz/react-relay-network-layer
ReactRelayNetworkLayer with middlewares and query batching for Relay Classic. - relay-tools/react-relay-network-layer
- 175Create a GraphQL HTTP server with Koa.
https://github.com/chentsulin/koa-graphql
Create a GraphQL HTTP server with Koa. Contribute to graphql-community/koa-graphql development by creating an account on GitHub.
- 176Make Relay work with React Native out of the box · Issue #26 · facebook/relay
https://github.com/facebook/relay/issues/26
The remaining steps are: Relay/React Native/fbjs versioning Use the appropriate unstableBatchedUpdates depending on React/React Native Version of fetch polyfill for React Native Document the use of...
- 177useHooks – The React Hooks Library
https://usehooks.com/
A collection of modern, server-safe React hooks – from the ui.dev team
- 178Making Sense of React Hooks
https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889
This week, Sophie Alpert and I presented the “Hooks” proposal at React Conf, followed by a deep dive from Ryan Florence:
- 179not magic, just arrays
https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e
Untangling the rules around the proposal using diagrams
- 180Color Match - CodeSandbox
https://codesandbox.io/s/jjy215l7w3
Color Match by tannerlinsley using d3-ease, emotion, mo-js, raf, react, react-dom, react-emotion, react-scripts
- 181Counter using useState of React Hooks - CodeSandbox
https://codesandbox.io/s/yjn90lzwrx?module=%2Fsrc%2FApp.js
Create a Counter using React Hooks with useState
- 182CodeSandbox
https://codesandbox.io/s/m449vyk65x
CodeSandbox is an online editor tailored for web applications.
- 183ppxnl191zx - CodeSandbox
https://codesandbox.io/s/ppxnl191zx
ppxnl191zx using lodash, react, react-dom, react-scripts, react-spring
- 184React Hooks for GraphQL
https://medium.com/open-graphql/react-hooks-for-graphql-3fa8ebdd6c62
How to create custom React hooks to handle common GraphQL operations.
- 185Hooks in react-spring, a tutorial
https://medium.com/@drcmda/hooks-in-react-spring-a-tutorial-c6c436ad7ee4
Yesterday the React-team finally unveiled their vision of a class-less future in React. Today we’re going to take a look at how to use…
- 186Using the State Hook – React
https://reactjs.org/docs/hooks-state.html
A JavaScript library for building user interfaces
- 187Using the Effect Hook – React
https://reactjs.org/docs/hooks-effect.html
A JavaScript library for building user interfaces
- 188Hooks Todo App - CodeSandbox
https://codesandbox.io/s/9kwyzy0y4
Example app for this post: \n\nhttps://blog.blackbox-vision.tech/making-a-beautiful-todo-app-using-react-hooks-material-ui
- 189useState() and useEffect() - CodeSandbox
https://codesandbox.io/s/yq5qowzrvz
React Hooks: useState() and useEffect() by chris-sev using react, react-dom, react-scripts
- 190Building Your Own Hooks – React
https://reactjs.org/docs/hooks-custom.html
A JavaScript library for building user interfaces
- 191Rules of Hooks – React
https://reactjs.org/docs/hooks-rules.html
A JavaScript library for building user interfaces
- 192Introducing Hooks – React
https://reactjs.org/docs/hooks-intro.html
A JavaScript library for building user interfaces
- 193Everything you need to know about React Hooks
https://medium.com/@vcarl/everything-you-need-to-know-about-react-hooks-8f680dfd4349
React just announced a new feature: Hooks. It’s a brand new set of APIs that enables powerful new ways to share stateful logic between…
- 194Hooks at a Glance – React
https://reactjs.org/docs/hooks-overview.html
A JavaScript library for building user interfaces
- 195Hooks FAQ – React
https://reactjs.org/docs/hooks-faq.html
A JavaScript library for building user interfaces
- 196Hooks API Reference – React
https://reactjs.org/docs/hooks-reference.html
A JavaScript library for building user interfaces
- 197React Hooks and Suspense
https://egghead.io/playlists/react-hooks-and-suspense-650307f2
React Suspense has been released in React 16.6.0 (React.lazy support only) and React Hooks is stable in 16.8.0! Let's see how we can use these and more ...
- 198Primer on React Hooks
https://testdriven.io/blog/react-hooks-primer/
An introduction to React Hooks.
- 199React Hook to track the visibility of a functional component
https://github.com/AvraamMavridis/react-intersection-visible-hook
React Hook to track the visibility of a functional component - AvraamMavridis/react-intersection-visible-hook
- 200Manage global state with React Hooks
https://medium.com/@Charles_Stover/manage-global-state-with-react-hooks-6065041b55b4
Since the announcement of experimental Hooks in React 16.7, they have taken the React community by storm.
- 201Managing Web Sockets with useEffect and useState
https://medium.com/@rossbulat/react-hooks-managing-web-sockets-with-useeffect-and-usestate-2dfc30eeceec
Rundown of React Hooks and applying them to a real-time chat room simulation
- 202React Hooks - A deeper dive featuring useContext and useReducer
https://testdriven.io/blog/react-hooks-advanced/
This article looks at how React JS hooks can be used to make React applications and their state management clean and efficient.
- 203jacobp100/hooks-test
https://github.com/jacobp100/hooks-test
Contribute to jacobp100/hooks-test development by creating an account on GitHub.
- 204A set of reusable React Hooks.
https://github.com/beizhedenglong/react-hooks-lib
A set of reusable React Hooks. Contribute to beizhedenglong/react-hooks-lib development by creating an account on GitHub.
- 205Determining screen size type for Bootstrap 4 grid.
https://github.com/pankod/react-hooks-screen-type
Determining screen size type for Bootstrap 4 grid. - pankod/react-hooks-screen-type
- 206A collection of useful React hooks
https://github.com/kitze/react-hanger
A collection of useful React hooks . Contribute to kitze/react-hanger development by creating an account on GitHub.
- 207React Hooks for Firebase.
https://github.com/csfrequency/react-firebase-hooks
React Hooks for Firebase. Contribute to CSFrequency/react-firebase-hooks development by creating an account on GitHub.
- 208[OUTDATED]Ponyfill for the React Hooks API (Support RN)
https://github.com/yesmeck/react-with-hooks
[OUTDATED]Ponyfill for the React Hooks API (Support RN) - yesmeck/react-with-hooks
- 209React's Hooks API implemented for web components 👻
https://github.com/matthewp/haunted
React's Hooks API implemented for web components 👻 - matthewp/haunted
- 210A timer hook for React
https://github.com/thibaultboursier/use-timer
A timer hook for React. Contribute to thibaultboursier/use-timer development by creating an account on GitHub.
- 211React Hooks — 👍
https://github.com/streamich/react-use
React Hooks — 👍. Contribute to streamich/react-use development by creating an account on GitHub.
- 212Web. Components. 😂
https://github.com/palmerhq/the-platform
Web. Components. 😂. Contribute to jaredpalmer/the-platform development by creating an account on GitHub.
- 213🌩 A tiny (185 bytes) event-based Redux-like state manager for React, Preact, Angular, Vue, and Svelte
https://github.com/storeon/storeon
🌩 A tiny (185 bytes) event-based Redux-like state manager for React, Preact, Angular, Vue, and Svelte - storeon/storeon
- 214Use immer to drive state with a React hooks
https://github.com/mweststrate/use-immer
Use immer to drive state with a React hooks. Contribute to immerjs/use-immer development by creating an account on GitHub.
- 215React hook for conveniently use Fetch API
https://github.com/ilyalesik/react-fetch-hook
React hook for conveniently use Fetch API. Contribute to ilyalesik/react-fetch-hook development by creating an account on GitHub.
- 216React hooks implementation of Google's "Thanos" easter egg
https://github.com/codeshifu/react-thanos
React hooks implementation of Google's "Thanos" easter egg - luqmanoop/react-thanos
- 217Learn Advanced React Hooks workshop
https://github.com/kentcdodds/advanced-react-hooks
Learn Advanced React Hooks workshop. Contribute to kentcdodds/advanced-react-hooks development by creating an account on GitHub.
- 218React hooks for convenient react-navigation use
https://github.com/react-navigation/react-navigation-hooks
React hooks for convenient react-navigation use. Contribute to react-navigation/hooks development by creating an account on GitHub.
- 219React Native APIs turned into React Hooks for use in functional React components
https://github.com/react-native-community/react-native-hooks
React Native APIs turned into React Hooks for use in functional React components - react-native-community/hooks
- 220📋 React Hooks for form state management and validation (Web + React Native)
https://github.com/bluebill1049/react-hook-form
📋 React Hooks for form state management and validation (Web + React Native) - react-hook-form/react-hook-form
- 221React Hook for accessing state and dispatch from a Redux store
https://github.com/facebookincubator/redux-react-hook
React Hook for accessing state and dispatch from a Redux store - facebookarchive/redux-react-hook
- 222Use React Hooks for `connect` by markerikson · Pull Request #1065 · reduxjs/react-redux
https://github.com/reduxjs/react-redux/pull/1065
This PR builds on the previous React-Redux version 6 preview work from #898, #995, aand #1000 . As with the previous couple PRs, the major changes are: Switching from legacy context to createCont...
- 223React Today and Tomorrow and 90% Cleaner React With Hooks
https://www.youtube.com/watch?v=dpw9EHDh2bM
The first three talks from React Conf 2018 by Sophie Alpert, Dan Abramov, and Ryan Florence.Learn more about Hooks at https://reactjs.org/hooks.
- 224🐶 React hook for making isomorphic http requests
https://github.com/alex-cory/react-usefetch
🐶 React hook for making isomorphic http requests. Contribute to ava/use-http development by creating an account on GitHub.
- 225Stepping through React code
https://youtu.be/JQeB9miT9Wc
I'm trying to figure out the best way to simplify testing of React components with react-testing-library.
- 226Using Immer with Reducers and React Hooks
https://youtu.be/FmKjwh34Rn8
Learn how to simplify your reducers with Immer and integrate it with React Hooks.Code: https://github.com/benawad/react-hooks-examples/tree/4_immerLinks from...
- 227Using React Hooks vs. Class Components
https://youtu.be/vbaIZ3xMj9U
I'm planning on using both React Hooks and Class Components.Code: https://github.com/benawad/react-hooks-examples/tree/3_performance_useReducerLinks from vid...
- 228Are React Hooks Slower than Class Components?
https://youtu.be/tKRWuVOEB2w
React Hooks are not slower than Class Components.Starting Code: https://github.com/benawad/react-hooks-examples/tree/1_todolist_useStateFinished Code: https:...
- 229Building a Todo List with React Hooks useState
https://youtu.be/cAZ-fOd1RpA
A walkthrough of building a Todo List with React Hooks. Specifically, useState.Code: https://github.com/benawad/react-hooks-examples/tree/1_todolist_useState...
- 230Fetching Data from an API with React Hooks useEffect
https://youtu.be/k0WnY0Hqe5c
Learn how to fetch data from an API using React Hooks useEffect.Code: https://github.com/benawad/react-hooks-examples/tree/2_api_useEffectLinks from video:ht...
- 231React Hooks useContext
https://youtu.be/xWXxkFzgnFM
Learn how to use the React Context API with function components. Using the useContext React Hook.Code: https://github.com/benawad/react-hooks-examples/tree/5...
- 232My Thoughts on React Hooks
https://youtu.be/gmF4k6P2va8
React Hooks is coming in React 16.7 Links from video:https://reactjs.org/docs/hooks-intro.html----If you like cooking, checkout my side project: https://www....
Related Articlesto learn about angular.
- 1Getting Started with React.js: Building Your First App
- 2JSX in React.js: The Gap Between JavaScript and HTML
- 3React Hooks: UseState, UseEffect, and More
- 4Building Reusable Components in React.js: Best Practices Guide
- 5State Management in React.js: Context API vs Redux
- 6Redux Toolkit in React.js: State Management for Complex Applications
- 7Connecting React.js with a REST API: Guide to Fetching Data
- 8Building Real-Time Applications with React and WebSockets
- 9Boosting React.js Performance: Code Splitting and Lazy Loading
- 10Setting Up React.js with TypeScript
FAQ'sto learn more about Angular JS.
mail [email protected] to add more queries here 🔍.
- 1
what are react js components
- 2
how to implement azure ad authentication in react js
- 3
how react js is different from angularjs
- 4
where can i find webpack.config.js in react
- 5
is react faster than javascript
- 6
is react similar to javascript
- 7
is react really necessary
- 8
what will replace react js
- 9
how to call api in react js
- 10
will solid js replace react
- 11
what is routing in react js
- 12
how long would it take to learn react js
- 13
why is react better than javascript
- 14
what are the important topics in react js
- 15
who uses react js
- 16
how to create an app in react js
- 17
can i learn next js without react
- 19
how much it will take to learn react js
- 20
does react js require node js
- 21
how to create app in react js
- 22
why would you use react
- 23
does a react component have to return jsx
- 24
is react worth it
- 25
how to install react js
- 26
is react.js hard to learn
- 27
how react js works
- 28
does react js need node js
- 29
when to use react js
- 30
why react js used
- 31
how to do react js
- 32
is react js free
- 33
who created react
- 34
what is redux in react js
- 35
how long it will take to learn react js
- 36
what we have to learn before react js
- 37
what language does react js use
- 38
how to get data by id in react js
- 39
is react js functional programming
- 40
why react js is faster
- 41
when react js was introduced
- 42
where react js is used
- 43
what is a side effect react
- 44
what is hooks in react js
- 45
does react js use html
- 46
how to install react js in windows
- 47
why react js is a library
- 48
why react js is so popular
- 49
what is component will mount in react js
- 50
who developed react js
- 51
what should i learn before react js
- 52
are react js and react native same
- 53
what are the prerequisites to learn react js
- 54
what is props in react js
- 55
does react js use typescript
- 56
should i use js or jsx in react
- 57
will reactjs die
- 58
is react js dying
- 59
is react losing popularity
- 60
how to call an api in react js
- 61
is react outdated
- 62
- 63
how to do routing in react js
- 64
should i use next js or react
- 65
what react js do
- 66
is react js a framework
- 67
what is react js in hindi
- 68
what does react js do
- 69
what react js is used for
- 70
where to start react js
- 71
do you need node js for react
- 72
what is context api in react js
- 73
how to create dynamic id in react js
- 74
which react framework is best
- 75
what is react side effects
- 76
where we use react js
- 77
will next js replace react
- 78
why should we use react js
- 79
what are the features of react js
- 80
what are react js hooks
- 81
does react js have future
- 82
where is webpack.config.js in react
- 83
why react js is important
- 84
how to get dynamic id in react js
- 85
does react.js create a virtual dom in the memory
- 86
can react js be used for backend
- 87
when was react js created
- 88
where is react-native.config.js
- 89
where to learn react js
- 90
is react js easy to learn
- 91
when to learn react js
- 92
is react javascript
- 93
how to do form validation in react js
- 94
what does strict mode do in react js
- 95
what are states in react js
- 96
will vue js overtake react
- 97
how does react js work
- 98
how to learn react js
- 99
how to do unit testing in react js
- 100
why react js is declarative
- 101
what are props in react js
- 102
how to create an api in react js
- 103
would react be dead
- 104
how to create an array in react js
- 105
is react js frontend or backend
- 106
how to use navigate in react js
- 107
what is state in react js
- 108
how to create an object in react js
- 109
is react js still relevant
- 110
should i learn next js or react
- 111
how to fetch data using id in react js
- 112
how to pass dynamic id in react js
- 113
why react js is better than angular
- 114
how much js should i know to learn react
- 115
how to do pagination in react js
- 116
where to code react js
- 117
do you have to use react with jsx
- 118
is react js a framework or library
- 119
can react js be used for mobile apps
- 120
why react js is popular
- 121
how to add image in react js
- 122
who owns react js
- 123
what should i learn after react js
- 124
who developed react
- 125
why do we use react js
- 126
is react js in demand
- 127
which companies use react
- 128
what are react js and node js
- 129
is react js a language
- 130
what is jsx in react
- 131
why react js is better
- 132
who created react js
- 133
when to use next js over react
- 134
how react js works internally
More Sitesto check out once you're finished browsing here.
https://www.0x3d.site/
0x3d is designed for aggregating information.
https://nodejs.0x3d.site/
NodeJS Online Directory
https://cross-platform.0x3d.site/
Cross Platform Online Directory
https://open-source.0x3d.site/
Open Source Online Directory
https://analytics.0x3d.site/
Analytics Online Directory
https://javascript.0x3d.site/
JavaScript Online Directory
https://golang.0x3d.site/
GoLang Online Directory
https://python.0x3d.site/
Python Online Directory
https://swift.0x3d.site/
Swift Online Directory
https://rust.0x3d.site/
Rust Online Directory
https://scala.0x3d.site/
Scala Online Directory
https://ruby.0x3d.site/
Ruby Online Directory
https://clojure.0x3d.site/
Clojure Online Directory
https://elixir.0x3d.site/
Elixir Online Directory
https://elm.0x3d.site/
Elm Online Directory
https://lua.0x3d.site/
Lua Online Directory
https://c-programming.0x3d.site/
C Programming Online Directory
https://cpp-programming.0x3d.site/
C++ Programming Online Directory
https://r-programming.0x3d.site/
R Programming Online Directory
https://perl.0x3d.site/
Perl Online Directory
https://java.0x3d.site/
Java Online Directory
https://kotlin.0x3d.site/
Kotlin Online Directory
https://php.0x3d.site/
PHP Online Directory
https://react.0x3d.site/
React JS Online Directory
https://angular.0x3d.site/
Angular JS Online Directory