react-take v0.2.6

✊ React Take

Take your data and get out here!

A simple and straight to point state management library for React

Installation

	npm install react-take
	# or
	yarn add react-take

Demo

import React from 'react';
import ReactDOM from 'react-dom';
import { createItem, useItem, useItemValue } from '../../src';

const nameItem = createItem('name');

const Nested = () => {
	const [name, setName] = useItem(nameItem);
	const onChange = (event) => {
		setName(event.target.value);
	};

	return (
		<div>
			<label>
				Enter name: <input onChange={onChange} value={name} />
			</label>
		</div>
	);
};

const App = () => {
	const name = useItemValue(nameItem, 'John');

	return (
		<div>
			<h3>{name}</h3>
			<Nested />
		</div>
	);
};

ReactDOM.render(<App />, document.getElementById('root'));

API

createItem(key: string, defaultValue?): Token

Creates a new item and returns its 'id'

useItem(token: Token, defaultValue?): value, Setter

Similar to React.useState, returns a tuples where the first element is the item value and the second is a setter function

useSetItem(token: Token): Setter

Returns a setter function for the given item, without subscribing the component to the item updates

useItemValue(token: Token, defaultValue?): value

Returns the value of the given item, and subscribes the component to the item updates

getItem(token: Token, defaultValue?): value

Returns the value of the given item

setItem(token: Token, value: T | (current: T) => T): Setter

A setter function for the given item

Feedback

If you have any feedback, please reach out to us at @albzrs

Acknowledgements

The api of this libray was heavily inspired in Recoil.js

License

MIT