Get / set store from React component

Hook that allows you to have a reactive store which re-renders the component when a new value is set.

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

function ExampleComponent() {
  const { fullName, email } = useStore()

  return (
    <span>{ fullName } - { email }</span>
  )
}

Returned value

Type	Description
Object (Proxy)	Reactive store object that you can modify like mutating an object. It will notify all the components using useStore

To consider

If you want to modify a property of the store, you need to use it without destructuring, like this:

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

function ExampleComponent () {
  const store = useStore()
  return (
    <button onClick={() => { store.fullName = 'Cervello Store' }}>
      Set Active to false
    </button>
  )
}

Options (optional)

Name	Type	Description
initialValue	(store) => Object	Initialize the store synchronously with a value like React's useState hook. It doesn't produce a re-render on init (It works on server-side)
select	Array<string> or () => Array<string>	Select the properties you want to listen to. It will only re-render the component if the selected properties change.
setValueOnMount	(store) => Promise<Object>	Set full store value on initial render
onChange	(storeChange) => void	Callback function that will be called when the store changes with the Change Information

Example with options

TypeScript

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


/** 
 * `initialValue` example
 *  Initialize the store with a value without re-rendering (it works on server-side)
 * */
function ExampleComponent () {
  const store = useStore({
    initialValue: () => ({ fullName: 'Cervello', email: 'example@cervello.dev' }),
  })

  return (<span>{ store.fullName }</span>)
}


/**
 * `select` example
 *  Select the properties you want to listen to (only re-render if the selected properties change)
 * */
function ExampleComponent () {
  const store = useStore({
    select: ['fullName'],
  })

  return (<span>{ store.fullName }</span>)
}


/**
 * `setValueOnMount` example
 *  Set full store value on initial render
 * */
function ExampleComponent () {
  const store = useStore({
    setValueOnMount: async () => {
      // ... Fetch data from API
      return { fullName: 'Cervello', email: 'example@cervello.dev' }
  })

  return (<span>{ store.fullName }</span>)
}

JavaScript

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


/** 
 * `initialValue` example
 *  Initialize the store with a value without re-rendering (it works on server-side)
 * */
function ExampleComponent () {
  const store = useStore({
    initialValue: () => ({ fullName: 'Cervello', email: 'example@cervello.dev' }),
  })

  return (<span>{ store.fullName }</span>)
}


/**
 * `select` example
 *  Select the properties you want to listen to (only re-render if the selected properties change)
 * */
function ExampleComponent () {
  const store = useStore({
    select: ['fullName'],
  })

  return (<span>{ store.fullName }</span>)
}


/**
 * `setValueOnMount` example
 *  Set full store value on initial render
 * */
function ExampleComponent () {
  const store = useStore({
    setValueOnMount: async () => {
      // ... Fetch data from API
      return { fullName: 'Cervello', email: 'example@cervello.dev' }
  })

  return (<span>{ store.fullName }</span>)
}