@cervello/react
TypeScript icon, indicating that this package has built-in type declarations

5.4.0Β β€’Β PublicΒ β€’Β Published

Cervello

npm version bundle-size

🀯 Simple, reactive, tiny and performant state-management library for React (just 1.5kb)



πŸ“– Documentation website


πŸš€ Features

  • βš›οΈ 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

πŸ“¦ Install

# NPM
npm install @cervello/react

# PNPM
pnpm add @cervello/react

# YARN
yarn add @cervello/react

πŸ’» Quick Usage

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 🎺🎡

Package Sidebar

Install

npm i @cervello/react

Weekly Downloads

521

Version

5.4.0

License

MIT

Unpacked Size

125 kB

Total Files

21

Last publish

Collaborators

  • chempogonzalez