Cervello

🤯 Simplest and truly reactive state manager for React (just 1.5kb)

🚀 Features

• ⚛️ Truly reactive on store change like normal objects without functions (nested properties too 🚀!!)
• ✅ Super simple and minimalistic API
• 🐨 Listen properties lazily
• 👌 No unnecessary re-renders
• 🔒 Immutable changes
• 🔑 Typescript support

📦 Install

# NPM
npm install @cervello/react

# PNPM
pnpm add @cervello/react

# YARN
yarn add @cervello/react

💻 Quick Usage

The cervello function allows you to create a new store in an easy way. Just set the initial value (the type will be inferred based on this value) and you have it!

// - store-example.ts
import { cervello } from '@cervello/react'

export const {
  store,       // Reactive store object
  useStore,    // Hook to listen for store changes
  useSelector, // Hook to listen for changes on parts of the store
  reset,       // Function to reset the store to initial value
} = cervello({
  count: 0,
  isModalOpen: false,
  /* ... */
})


// With the store object you can use it outside of React components
const increment = () => { store.count++ }


const Button = () => {
  const { count } = useStore() // Listen for changes on the whole store
  return (
    <button onClick={increment}>
      {count}
    </button>
  )
}

const ButtonWithSelector = () => {
  const { count } = useSelector(['count']) // Listen for changes just on 'count' property
  return (
    <button onClick={increment}>
      {count}
    </button>
  )
}

To see more in depth explanations or API references and more examples: 📖 Documentation website

Created with Typescript! ⚡ and latin music 🎺🎵