@jsxtools/create-context-state

create-context-state

create-context-state lets you create context states sharable across components in React.

It is 231 bytes (184 gzipped).

Installation

npm install @jsxtools/create-context-state

Usage

// state.js creates a sharable state
import createContextState from '@jsxtools/create-context-state';

const [useState, Provider] = createContextState({
  givenName: 'Ellen',
  familyName: 'Ripley'
});

export { useState, Provider };

// MyApp.js binds that state to the context of a React DOM tree
import { Provider } from './state.js';

export default function MyApp() {
  return (
    <Provider>
      <MyComponent />
    </Provider>
  );
}

// MyComponent.js uses the sharable state in the context of its React DOM tree
import { useState } from './state.js';

export default function MyComponent() {
  let [state, setState] = useState();

  return (
    <form>
      <p>
        <label>
          Given Name
          <input
            defaultValue={state.givenName}
            onInput={event => setState(event.target.value)}
          />
        </label>
      </p>
      <p>
        <label>
          Family Name
          <input
            defaultValue={state.familyName}
            onInput={event => setState(event.target.value)}
          />
        </label>
      </p>
    </form>
  );
}