Quickstart

1. Create provider

simpler-provider.js

import React from 'react'
import { createProvider } from 'react-shared-state'

const SimpleProvider = createProvider()

2. Add provider to the root component of your application

app.js

export function App() {
  return (
    <SimpleProvider initialState={{ name: 'Luke SkyWalker' }}>
      <Hello />
    </SimpleProvider>
  )
}

3. Connect provider's store to your component

hello.js

import React from 'react'
import { SimpleProvider } from './simple-provider.js'

const HelloComponent = (props) => {
  <div>
    <h1> Hello, {props.name}</h1>
    <button onClick={() => props.store.setState({ name: 'Darth Vader' })}>Set Name</button>
  </div>
}

export const Hello = SimpleProvider.connect((store) => ({
  store,
  name: store.state.name
}))(HelloComponent)