react-zeroconfig-components v1.10.2
React Zero-Config Components
React components that require (almost) zero configuration.
For Stripe payments etc, see https://github.com/tomsoderlund/react-zeroconfig-payments
Installation
yarn add react-zeroconfig-components # or: npm install react-zeroconfig-components
Accessibility
- All components use
button
where applicable - Keyboard/tab support
Styling
Styling is optional, CSS files are included but you can also use styled-components
or similar.
How to import CSS file, example:
import '../node_modules/react-zeroconfig-components/dist/TokenList.css'
Components
There are three groups of components:
- Array-based components: these all have similar props, they all take an array of strings or
{ name, value }
and renders a list or a menu. - Input components: taking input from the user.
- Other components: everything else.
See the Storybook stories in /stories
to see how the components are used in code, including more advanced use cases.
Array-based components
Component: List
import { List } from 'react-zeroconfig-components'
<List
values={arrayOfObjects}
numbered={false}
customFormat={optionalCustomFormat}
/>
const optionalCustomFormat = (row, index) => {
/* return formatted value */
}
Component: Table
<Table
values={arrayOfObjects}
customFormat={optionalCustomFormat}
/>
const optionalCustomFormat = (field, value, rowIndex, columnIndex) => {
/* return formatted value */
}
Component: RadioButtons
<RadioButtons
options={arrayOfStringsOrObjects}
value={currentValue}
onChange={value => handleChange(value)}
/>
Component: SelectDropdown
<SelectDropdown
options={arrayOfStringsOrObjects}
value={currentValue}
onChange={value => handleChange(value)}
/>
Component: SelectMenu
<SelectMenu
options={arrayOfStringsOrObjects}
value={currentValue}
onChange={value => handleChange(value)}
/>
Component: TabMenu
<TabMenu
options={arrayOfStringsOrObjects}
value={currentValue}
onChange={value => handleChange(value)}
/>
Advanced example:
<TabMenu
options={arrayOfStringsOrObjects}
value={currentValue}
onChange={handleChange}
elementType='nav'
customChild={MyCustomComponent}
/>
Component: TokenList
<TokenList
options={arrayOfStringsOrObjects}
value={currentValue}
onSelect={token => handleSelect(token)}
onRemove={token => handleRemove(token)}
/>
Input components
Component: ToggleSwitch
<ToggleSwitch
value={currentValue}
onChange={value => handleChange(value)}
/>
Component: TokenInput
<TokenInput
options={arrayOfStringsOrObjects}
value={smallerArrayOfStringsOrObjects}
onAdd={handleAdd}
onRemove={handleRemove}
/>
Component: TokenSearchInput
<TokenSearchInput
value={arrayOfStringsOrObjects}
onSearch={async (searchText) => { return foundMatch }}
onAdd={handleAdd}
onRemove={handleRemove}
placeholder='Type here to search'
canAddAny={true}
/>
Component: SearchInput
<SearchInput
onSearch={async (searchText) => { return foundMatch }}
onSubmit={handleSubmit}
placeholder='Type here to search'
canSubmitAny={true}
/>
Component: EditInPlace
<EditInPlace
placeholder='Edit headline'
value={article.headline}
onChange={headline => updateArticle({ headline })}
canEdit={!!user}
style={{ fontSize: '2.5em' }}
>
<h1>{article.headline}</h1>
</EditInPlace>
Other components
Component: ListCard
<ListCard
name='Sam Lowry'
details='Main character'
imageUrl='https://pbs.twimg.com/profile_images/943955598718017536/XVuOSUzc_400x400.jpg'
>
<button>Edit</button>
<button>Delete</button>
</ListCard>
Component: Card
<Card
layer={0}
visible={isVisible}
onClose={event => setIsVisible(!isVisible)}
>
(...content...)
</Card>
<Card
layer={1}
...
/>
Events
onAdd
onChange
onClose
onRemove
onSearch
onSelect
onSubmit
Developing components
Create new component
yarn new
How to test and preview
Preview components in Storybook:
yarn storybook
...then open http://localhost:6006/ in your browser.
How to build and publish a new NPM package
yarn publish # yarn prepare (Babel) will be run automatically
Troubleshooting
React Hook order error:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
Solution: check if conflicting versions:
yarn list react # or npm ls react
Todo
- Range slider
- Range slider 2D
2 years ago
2 years ago
2 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago