@cervello/react NPM

Cervello

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

🚀 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>)
}