Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jesstelford/react-list-provider
Use Context to save lists of whatever you want, then access them anywhere in your componpent tree.
https://github.com/jesstelford/react-list-provider
Last synced: 28 days ago
JSON representation
Use Context to save lists of whatever you want, then access them anywhere in your componpent tree.
- Host: GitHub
- URL: https://github.com/jesstelford/react-list-provider
- Owner: jesstelford
- License: mit
- Created: 2020-06-15T07:39:39.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-01-06T08:55:53.000Z (almost 2 years ago)
- Last Synced: 2024-11-07T02:42:51.396Z (about 2 months ago)
- Language: JavaScript
- Size: 2.34 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React List Provider
Use Context to save lists of whatever you want, then access them anywhere in
your componpent tree.
`index.js`
```jsx
import { ListProvider } from 'react-list-provider';
import App from './app';
import ReactDOM from 'react-dom';
ReactDOM.render(
,
document.body
);
```
`app.js`
```jsx
const { useList } = require('react-list-provider');
export const App = () => {
const { addItem, items } = useList({ name: 'notifications' });
return (
{items.map((item) => (
Notification: {item.message}
))}
Example application
addItem({ id: Date.now().toString(), message: 'Hi' })}
>
Say hi
);
};
```
## Installation
```
yarn add react-list-provider
```
or, for `npm`:
```
npm install --save react-list-provider
```
## API
```javascript
import { ListProvider, ListConsumer, useList, withListManager } from 'react-list-provider';
```
### ``
A React Context Provider for an instance of a list of items.
```jsx
```
#### Props
| Prop | isRequired | Description |
| ------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | ✅ | A unique name used to identify the list. Must match a corresponding usage of `useList`/`withListManager`/`ListConsumer` |
| `keyBy` | | Enforce uniqueness by setting a key to use when adding items. For example, setting `'id'` will ensure all added items have a unique `'id'` field. If omitted, no uniqueness will be enforced, and only `items`/`addItems`/`clearItems` methods are exposed on the context. |
### List Methods
Each of `useList`/`withListManager`/`ListConsumer` return a context object which
contains the following keys:
| | Type | Description |
| ---------------- | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `items` | `Array` | The list items as added with `addItem` |
| `addItem` | `Function(): void` | Add an individual item to the list. If the `` has `keyBy` set, the item passed to `addItem` must contain that field. |
| `clearItems` | `Function(): void` | Remove all items from the list. |
| `updateItem`\* | `Function(key, ): void` | Update a single item in the list. Performs a shallow merge. |
| `removeItem` \* | `Function(key): void` | Remove a single item from the list. |
| `removeItems` \* | `Function(key): void` | Remove multiple items from the list. |
| `hasItem` \* | `Function(key): Boolean` | Check if an item in the list has the given key. |
| `getItem` \* | `Function(): ` | Retrieve the item in the list with the given key (or `undefined`). |
\* _Only available when `keyBy` is set on the ``_
### ``
A React Context Consumer, used to access the [list methods](#list-methods).
```jsx
{(context) => {
// context.items, context.addItem, ...etc
return ;
}}
```
#### Props
| Prop | isRequired | Description |
| ------ | ---------- | --------------------------------------------------------------------------------------------- |
| `name` | ✅ | A unique name used to identify the list. Must match a corresponding usage of `` |
### `useList(config)`
A React Hook, used to access the [list methods](#list-methods).
```jsx
const Component = () => {
const { items, addItem, ...etc } = useList({ name: 'notifications' });
return ;
};
```
#### `config`
| | isRequired | Description |
| ------ | ---------- | --------------------------------------------------------------------------------------------- |
| `name` | ✅ | A unique name used to identify the list. Must match a corresponding usage of `` |
### `withListManager(Component, config)`
Creates a React Higher Order Component which injects a prop named `listManager`;
an object containing the [list methods](#list-methods).
```jsx
const Component = ({ listManager }) => {
// listManager.items, listManager.addItem, etc...
return ;
};
const ComponentWithList = withListManager(Component, { name: 'notifications' });
```
#### `Component`
The existing React component to inject the prop `listManager` into.
#### `config`
| | isRequired | Description |
| ------ | ---------- | --------------------------------------------------------------------------------------------- |
| `name` | ✅ | A unique name used to identify the list. Must match a corresponding usage of `` |
## Nested Providers
It's possible to nest ``s, enabling multiple lists to co-exists.
Nested Providers must be given a unique `name` to differentiate them:
```jsx
import { ListProvider, ListConsumer } from 'react-list-provider';
const App = () => (
{({ addItem }) => (
addItem('Hello')}>Add Notification
)}
{({ addItem }) => (
addItem('Jess')}>Add Account
)}
);
```