JSPM

preact-global-state

1.0.5
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1197
  • Score
    100M100P100Q92046F
  • License MIT

Global State for Preact

Package Exports

  • preact-global-state
  • preact-global-state/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (preact-global-state) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

This is a simple version (79 lines, 200 bytes minified gziped) of React state-pool. This only contains one Preact hook, useGlobalState that can be used to set/get global states.

Installing

npm install preact-global-state

Usage

import { store, useGlobalState } from 'preact-global-state';

store.init({
    name: "Ghost"
});

function App() {
    const [name, setName] = useGlobalState('name');

    return (
        <div>
            The Name: { name }
            <button onClick={() => setName('Another name')}></button>   
        </div>
    )
}

// another component
function Compo2() {
    const [name] = useGlobalState('name');

    return <div>{name}</div>
}

Whenever the button is clicked, all components that use the name globalState will be updated (Ex: Compo2).

  • store.init sets the starting values.
  • You can also set a default value as useGlobalState(key, defaultValue), which will be used when a global state for that key is not defined.