venti

    1.6.0 • Public • Published

    Venti

    Global State for React

    Build Status

    Install

    npm i venti
    

    Quick Start

    Get global state

    import React from 'react'
    import { useVenti } from 'venti'
     
    export default function Book({ id }) {
      const state = useVenti() // this is needed so your component updates when state changes
      const { author, title } = state.get(`books.${id}`, {}) // get an object
      const year = state.get(`books.${id}.year`)             // or a property
      return <div>"{title}" by {author} ({year})</div>
    }

    Set global state

    import { state } from 'venti'
     
    state.set('books.1', {
      author: 'John Steinbeck',
      title: 'Cannery Row',
      year: 1945
    })

    API

    useVenti( [state] )

    • state {State} (optional) defaults to singleton state if not provided
    • Returns state that has been instrumented to update the component when applicable
    • See StateEventer for more info

    state.get( path, [defaultValue] )

    • path {Array|string} The path to get
    • defaultValue {*} (optional) The value returned for undefined resolved values
    • Returns the resolved value

    state.set( path, value )

    • path {Array|string} The path of the property to set
    • value {*} The value to set

    state.unset( path )

    • path {Array|string} The path of the property to unset

    state.update( path, transformFn, [defaultValue] )

    • path {Array|string} The path of the property to set
    • transformFn {Function} transforms the current value to a new value
    • defaultValue {*} (optional) the default value to pass into the transform function if the existing value at the given path is undefined
      state.update('counter', n => n + 1, 0)

    Advanced Usage

    If you don't want to use Venti's singleton state, you can do this:

    import React from 'react'
    import { State, useVenti } from 'venti'
     
    const globalState = new State()
    const useGlobalState = () => useVenti(globalState)
     
    export default function Book({ id }) {
      const state = useGlobalState()
      const { title, year } = state.get(`books.${id}`)
      return <div>{title} ({year})</div>
    }

    Performance Benchmarks

    Color Matrix Benchmark

    Examples

    Tests

    npm test
    

    License

    MIT

    Install

    npm i venti

    DownloadsWeekly Downloads

    76

    Version

    1.6.0

    License

    MIT

    Unpacked Size

    34.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar