https://github.com/chempogonzalez/cervello

🤯 Simplest and trully reactive state manager for React
https://github.com/chempogonzalez/cervello

Last synced: 4 months ago
JSON representation

🤯 Simplest and trully reactive state manager for React

• Host: GitHub
• URL: https://github.com/chempogonzalez/cervello
• Owner: chempogonzalez
• License: mit
• Created: 2021-11-29T10:22:24.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-03-22T20:59:39.000Z (10 months ago)
• Last Synced: 2024-04-25T06:43:02.406Z (9 months ago)
• Language: TypeScript
• Homepage: https://www.cervello.dev
• Size: 979 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Cervello

[![npm version](https://img.shields.io/npm/v/@cervello/react?color=blue&style=flat-square)](https://www.npmjs.com/package/@cervello/react)

[![bundle-size](https://img.shields.io/bundlephobia/minzip/@cervello/react/latest?color=orange&style=flat-square)](https://bundlephobia.com/package/@cervello/react@latest)







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









  


      📖 Documentation website

  







## 🚀 **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**

```bash

# 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!

```ts

// - 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 (

    

      {count}

    

  )

}

const ButtonWithSelector = () => {

  const { count } = useSelector(['count']) // Listen for changes just on 'count' property

  return (

    

      {count}

    

  )

}

```







---------

### To see more in depth explanations or API references and more examples:  📖 [Documentation website](https://www.cervello.dev)

--------




> Created with Typescript! ⚡ and latin music 🎺🎵