
π€― Simple, reactive, tiny and performant state-management library for React (just 1.5kb)
π Documentation website
- βοΈ Reactive with store object changes (nested properties too π!!)
- β Simple & minimalistic API
- π Batched updates and optimized re-renders
- π¨ Lazy listen nested properties
- π Immutable changes
- π Typescript support
# NPM
npm install @cervello/react
# PNPM
pnpm add @cervello/react
# YARN
yarn add @cervello/react
It's as simple as reassign a new value to the store properties.
It will notify all the components using useStore
hook to re-render with the new value.
// - store-example.ts
import { cervello } from '@cervello/react'
export const {
store, // Object with reactive changes
useStore, // Hook to listen for store or partial store changes
reset, // Function to reset the store to initial value
} = cervello({
fullName: 'Cervello Store',
address: {
city: 'Huelva',
/* ... */
},
})
// Change value from anywhere
store.address.city = 'Sevilla'
// Listen for changes from components
function Address() {
const { address } = useStore()
return (<p>City: {address.city}</p>)
}
// Just listen for changes in the `city` property
const AddressWithSelector = () => {
const { address } = useStore({
select: ['address.city']
})
return (<p>City: {address.city}</p>)
}
To see more in depth explanations or API references and more examples: π Documentation website
Created with Typescript! β‘ and latin music πΊπ΅