Store object with reactive changes

Magic object (Proxy) that you can use inside or outside React components to get or modify the store.
It will automatically notify all the components using useStore hook and re-render them.

TypeScript

type Store = {
  fullName: string
  email: string
}

const { store } = cervello<Store>({
  fullName: '',
  email: '',
})

JavaScript

const { store } = cervello({
  fullName: '',
  email: '',
})

Example

TypeScript

import { store } from './store-example'

/**
 * It can be used outside the react components
 * It will notify all the components using `useStore` hook
 */
const setFullName = () => { store.fullName = 'Cervello Store' }

function FullNameSetter () {
  return (
    <button onClick={setFullName}>
      Set full Name
    </button>
  )
}

JavaScript

import { store } from './store-example'

/**
 * It can be used outside the react components
 * It will notify all the components using `useStore` hook
 */
const setFullName = () => { store.fullName = 'Cervello Store' }

function FullNameSetter () {
  return (
    <button onClick={setFullName}>
      Set full Name
    </button>
  )
}

🧩 Special attribute

This attribute is used to:

• Get the current store value (without Proxy)
• Replace the complete store in a single transaction

Name	Type	Getter	Setter	Description
$value	Store type	true	true	- Gets the store value - Set the store value in a single transaction

Attribute $value example

TypeScript

import { store } from './store-example'
import type { Store } from './store-example'

// Outside the component
const setUserInfo = (): void => {
  const newStore: Store = {
    fullName: 'Cervello Store',
    email: 'example@cervello.dev'
  }

  store.$value = newStore
}

function UserComponent () {
  return (
    <button onClick={setUserInfo}>
      Login
    </button>
  )
}

JavaScript

import { store } from './store-example'


// Outside the component
const setUserInfo = (): void => {
  store.$value = {
    fullName: 'Cervello Store',
    email: 'example@cervello.dev'
  }
}

function UserComponent () {
  return (
    <button onClick={setUserInfo}>
      Login
    </button>
  )
}