@ryotamurakami/react-appstate NPM

React AppState

🌏 React Global AppState for Sharing Data between each components Built on Context.

top

Usage
Why
Resources
Installation
API
- <Provider appState={AppState} />
- const [appState, setAppState] = useAppState()
Get value from appState
- update appState with setAppState(appState: Object)
Advanced
TypeScript
- Example
LICENSE
Contributors

Usage

// index.js
import React, { Fragment } from 'react'
import ReactDOM from 'react-dom'
import Provider, { useAppState } from '@ryotamurakami/react-appstate'
 
// initialAppState must be Plain Object
const initialAppState = { count: 0 }
 
ReactDOM.render(
  <Provider appState={initialAppState}>
    <App />
  </Provider>,
  document.getElementById('root')
)
 
function App() {
  const [appState, setAppState] = useAppState()

  return (
    <Fragment>
      <div>
        <button onClick={() => setAppState({ count: appState.count + 1 })}>increment</button>
        <button onClick={() => setAppState({ count: appState.count - 1 })}>decrement</button>
      </div>
      <p>I have {appState.apple.count} apples </p>
    </Fragment>
  )
}

Play 👇

codesandbox

https://react-appstate-demo.netlify.com/ Same code as above usage's one.

Why

I wanted a sharable state over the component hierarchy that could be setup immediately (in one shot). The goal was to have something similar to a global version of setState() with a simple interface.

Although there are many similar libraries and blog posts with code examples, they tended to be unnecessarily complicated / difficult to reuse. React AppState is awesome for prototyping, experimenting, and developing small apps.

Now, thesetAppState() custom hook is packed it as an npm package to make setup one shot anywhere! 🍸

Resources

React + TypeScript Cheatsheets: Example App React TypeScript Todo Example 2019 is created with react-appstate.

Installation

npm install @ryotamurakami/react-appstate

API

`<Provider appState={AppState} />`

Make your AppState as a plain Javascript Object.(eg: const GlobalStaate = {foo: "bar"})
Wrap Provider in your root app component.

import Provider from '@ryotamurakami/react-appstate'

// initialAppState must be Plain Object
const initialAppState = { count: 0 }

ReactDOM.render(
  <Provider appState={initialAppState}>
    <App />
  </Provider>,
  document.getElementById('root')

`const [appState, setAppState] = useAppState()`

Gives interface to access and set the global appState.

Get value from `appState`

// example
import { useAppState } from '@ryotamurakami/react-appstate'

const AppleComponent = () => {
  const [appState, setAppState] = useAppState()
  
  return (<div><{appState.thisIsMyValue}/div>)
}

update appState with `setAppState(appState: Object)`

// example
import { useAppState } from '@ryotamurakami/react-appstate'

const NintendoComponent = () => {
  const [appState, setAppState] = useAppState()
  const orderSmashBros = () => setAppState({sales: appState.sales + 1 })
  
  return (<button onClick={orderSmashBros}>You can not wait!!</button>)
}

Advanced

This is an abstract example utilizing custom Hooks.

src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import Provider, { useAppState } from '@ryotamurakami/react-appstate'
import { Layout } from './style'
import useAction from './actions'

const initialAppState = { count: 0 }
ReactDOM.render(
  <Provider appState={initialAppState}>
    <App />
  </Provider>,
  document.getElementById('root')
)

function App() {
  const action = useAction()
  return (
    <Layout>
      <div>
        <button onClick={action.increment}>increment</button>
        <button onClick={action.decrement}>decrement</button>
      </div>
      <p>{useAppState().appState.count}</p>
    </Layout>
  )
}

src/actions.js

import { useAppState } from '@ryotamurakami/react-appstate'

function useAction() {
  const [appState, setAppState] = useAppState()

  const Action = {}
  Action.increment = () => setAppState({ count: appState.count + 1 })
  Action.decrement = () => setAppState({ count: appState.count - 1 })

  return Action
}

export default useAction

Multiple AppStates

・Play 👇

TypeScript

This package contains an index.d.ts type definition file, so you can use it in TypeScript without extra configuration.

Example

import React, { ReactElement } from 'react'
import ReactDOM from 'react-dom'
import Provider, { useAppState } from '@ryotamurakami/react-appstate'

interface Food {
  id: string
  name: string
}

type TodoList = Todo[]

interface AppState {
  FoodList: FoodList
}

let initialAppState: AppState = {
  foodList: []
}

const App = () => {
const [appState, setAppState] = useAppState<AppState>() // pass appState object type as generic
const item1: Food = {id: 'j4i3t280u', name: 'Hamburger'}
const item2: Food = {id: 'f83ja0j2t', name: 'Fried chicken'}
setAppState({foodList: [item1, item2]})

const foodListView: ReactElement[] = appState.foodList.map((f: Food) => <p key={f.id}>{f}</p>)

return (<div>{foodListView}</div>)
}

ReactDOM.render(
    <Provider appState={initialAppState}>
      <App>
    </Provider>,
  document.getElementById('root')
)