How to use react-context-hook - 7 common examples

export default function() {
  store.set('count', 25).then(() => {
    console.log(`I modified the store, and I'm not a React component`)
  })
  store.set('pippo', 25)
}

export default function() {
  store.set('count', 25).then(() => {
    console.log(`I modified the store, and I'm not a React component`)
  })
  store.set('pippo', 25)
}

export default function() {
  const [username, setUsername] = useStore('username', 'spyna', true)
  const [textValue, setTextValue] = React.useState(username)
  function onChange(event) {
    setTextValue(event.target.value)
  }

  function onSubmit(event) {
    event.preventDefault()
    setUsername(textValue)
  }

  return (
    <section>
      <h3>
        Set the value <em>"username"</em> in the store
      </h3>
      <form></form></section>

)
}

const initialState = { count: 10 }

const storeConfig = {
  listener: state => {
    console.log('state changed', state)
  },
  logging: true //process.env.NODE_ENV !== 'production'
}

export default withStore(App, initialState, storeConfig)

export default function() {
  const [count, setCount, deleteCount] = useStore('count', 0)
  return (
    <section>
      <h3>
        Set the value <em>"count"</em> in the store
      </h3>
      <button> setCount(count - 1)}&gt;Decrement - </button>
      <span>{count}</span>
      <button> setCount(count + 1)}&gt;Increment + </button>
      <button> deleteCount()}&gt;Delete "count" from store</button>
    </section>
  )
}

export default function() {
  const [setValue, deleteValue] = useSetAndDelete('a-sample-key')
  return (
    <section>
      <h3>
        Set/Remove the key<code>'a-sample-key'</code> with the value{' '}
        <code>'the value'</code>
      </h3>
      <button> setValue('the value')}&gt;
        set 'a-sample-key' in store
      </button>
      <button> deleteValue()}&gt;
        remove 'a-sample-key' from store
      </button>
    </section>
  )
}

function App() {
  const globalState = useStoreState()
  return (
    <div>
      <header title="React context Hook">
      <section>
        <h3>
          This is a React App that has a global state. This is the global{' '}
          <em>store</em> value.
        </h3>
        <pre>          <code>{JSON.stringify(globalState, null, ' ')}</code>
        </pre>
        <h4>
          You can change the global state from different components, using the</h4></section></header></div>