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

To help you get started, we’ve selected a few react-context-hook examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Spyna / react-context-hook / example / src / nonComponent.js View on Github external
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)
}
github Spyna / react-context-hook / example / src / nonComponent.js View on Github external
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)
}
github Spyna / react-context-hook / example / src / SetString.js View on Github external
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>
github Spyna / react-context-hook / example / src / App.js View on Github external
)
}

const initialState = { count: 10 }

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

export default withStore(App, initialState, storeConfig)
github Spyna / react-context-hook / example / src / SetAmount.js View on Github external
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>
  )
}
github Spyna / react-context-hook / example / src / UseSetAndDeleteExample.js View on Github external
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>
  )
}
github Spyna / react-context-hook / example / src / App.js View on Github external
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>

react-context-hook

A React.js global state manager with Hooks and Context API

MIT
Latest version published 3 years ago

Package Health Score

48 / 100
Full package analysis