Usage

Description

The cervello function allows you to create a new store in an easy way.
Just set the initial value and start using it in your components.

Example

TypeScript

// store-example.ts

import { cervello } from '@cervello/react'

type Store = { count: number }

export const {
  store,       // Magic object to get/set values from anywhere
  useStore,    // Hook to be used in the components
  reset,       // Function to reset the store 
} = cervello<Store>({ count: 0 })

JavaScript

// store-example.js

import { cervello } from '@cervello/react'



export const {
  store,       // Magic object to get/set values from anywhere
  useStore,    // Hook to be used in the components
  reset,       // Function to reset the store 
} = cervello({ count: 0 })

Options (optional)

Name	Type	Description
afterChange	(storeChange) => void	For side side-effects. Execute a function after a change in the store. It receives the storeChange object with the information about the change.

Example with options

TypeScript

// store-example.ts

import { cervello } from '@cervello/react'
import type { CervelloOptions } from '@cervello/react'


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

  {
    // Execute a function after a change in the store (side-effects)
    afterChange: (storeChange) => {
      console.log('storeChange', storeChange)
    }
  } satisfies CervelloOptions<Store>,
)

JavaScript

// store-example.js

import { cervello } from '@cervello/react'



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

  {
    // Execute a function after a change in the store (side-effects)
    afterChange: (storeChange) => {
      console.log('storeChange', storeChange)
    }
  },
)

Non-Reactive properties

Cervello allows you to create non-reactive properties in the store.
By this way you can have a mixed store with reactive and non-reactive properties.
You can use them to store values that don't need to be reactive or if they are created by external libraries.

TypeScript

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


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

  // Wrap the non-reactive object/properties with the nonReactive function
  complexObject: nonReactive(/* ... */),
})

JavaScript

// store-example.js
import { cervello, nonReactive } from '@cervello/react'


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

  // Wrap the non-reactive object/properties with the nonReactive function
  complexObject: nonReactive(/* ... */),
})