1.0.0 • Published 4 years ago

expose-state v1.0.0

Weekly downloads
2
License
MIT
Repository
github
Last release
4 years ago

expose-state

A helper React HOC to return a component that will re-render when a value is changed.

Installation

# npm
npm install expose-state

# yarn
yarn add expose-state

Example

import { exposeState } from 'expose-state'
import React from 'react'
import { render } from 'react-dom'

const [GlobalError, globalErrorState] = exposeState(
  (errorMessage, props) =>
    errorMessage && <Message text={errorMessage} {...props} />,
)(null)

const Message = ({ text }) => <div>{text}</div>

render(
  <div>
    <GlobalError />
    <h1>Welcome!</h1>
  </div>,
  document.querySelector('#root'),
)

window.addEventListener(
  'error',
  event => globalErrorState.setState(event.message),
)

API

exposeState(render): initialState => [WrapperComponent, Store]

A helper React HOC to return a component that will re-render when a value is changed.

ArgumentTypeDescription
render(state, props) => NodePassed the current state value and the props passed to the wrapped component. Returns a React node.
initialState*Initial state value.

Returns a tuple. The first item is the wrapped component subscribed to the store, and the second item is the store.

PropertyTypeDescription
store.getState(): *Returns the current state value.
store.setState(nextState): voidSets the state to the given value and executes listeners.
store.subscribe(state => *): () => voidSubscribe the given listener function to updates; it will be invoked with the next state. Returns a function that can be called to unsubscribe.
const [ShowCount, store] = exposeState(
  count => <Count value={count} />,
)(0)

const unsubscribe = store.subscribe(count => {
  console.log(`count: ${count}`)
})

const currentCount = store.getState()
store.setState(currentCount + 1)

unsubscribe()

License

MIT