React Treasure is a tool that allows you to share and store data across React components. It uses the React Context API to manage data.
npm install react-treasureBefore you can use the Treasure you need to wrap your application/parent component with the TreasureProvider.
import { Provider } from 'react-treasure';
const defaultUser = {
name: 'John Doe',
age: 20
};
function App() {
return (
<Provider initialData={{ user: defaultUser }}>
<User />
</Provider>
);
}Here let's say we have a User component that has a UserDetails component as a child. We want to share the user data across both components.
import React from 'react';
import { useTreasure } from 'react-treasure';
const User = () => {
const [userData] = useTreasure('user');
return (
<div>
<h1>{user.name}</h1>
<UserDetails />
</div>
);
};In the UserDetails component we want to access the user data and modify it.
import React from 'react';
import { useTreasure } from 'react-treasure';
const UserDetails = () => {
const [user, setUser] = useTreasure('user');
return (
<div>
<button onClick={() => setUser({ name: 'Jeff Bezos', age: 55 })}>Change User</button>
</div>
);
};This project is licensed under the MIT license. See the LICENSE file for more info.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent