ven
venti
npm i venti
ven

venti

⚛️ Global State for React

by Will Schmid

1.6.0 (see all)License:MITTypeScript:Not Found
npm i venti
Readme

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

Downloads/wk

19

GitHub Stars

16

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

2

OPEN PRs

0
VersionTagPublished
1.6.0
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial