Have ideas to improve npm?Join in the discussion! ¬Ľ

    @blue-tomato/use-retext
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.0¬†‚Äʬ†Public¬†‚Äʬ†Published

    ūüĒź React useReducer alternative by Blue Tomato.

    Installation

    Type npm install @blue-tomato/use-retext into your console

    Usage

    import React from 'react';
    import useRetext from '@blue-tomato/use-retext';
    import SideMenu from './SideMenu';
     
    const store = {
      state: {
        isOpen: false,
        searchTerm: undefined,
      },
      reducer: {
        setSearchTerm: (state, payload) => ({ ...state, searchTerm: payload }),
        sideMenu: {
          toggle: state => ({ ...state, isOpen: !state.open }),
        },
      },
    };
     
    export default ({ children, ...props }) => {
      const { state, dispatch } = useRetext(store);
     
      return (
        <div {...props}>
          <button
            type="button"
            onClick={() => {
              dispatch.setSearchTerm('test');
              dispatch.sideMenu.toggle();
            }}
          >
            Test me!
          </button>
          <SideMenu state={state} />
        </div>
      );
    };

    Usage with createStore

    Store.js

    import { createStore } from '@blue-tomato/use-retext';
     
    const store = {
      state: {
        isOpen: false,
        searchTerm: undefined,
      },
      reducer: {
        setSearchTerm: (state, payload) => ({ ...state, searchTerm: payload }),
        sideMenu: {
          toggle: state => ({ ...state, isOpen: !state.open }),
        },
      },
    };
     
    const [Store, useStore] = createStore(store);
     
    export default Store;
    export { useStore };

    Parent.jsx

    import React from 'react';
    import Store from './Store';
    import Child from './Child';
     
    export default ({ ...props }) => (
      <Store {...props}>
        <Child />
      </Store>
    );

    Child.jsx

    import React from 'react';
    import { useStore } from './Store';
     
    export default ({ ...props }) => {
      const { state, dispatch } = useStore();
     
      return (
        <div {...props}>
          <button
            type="button"
            onClick={() => {
              dispatch.setSearchTerm('test');
            }}
          >
            Test me!
          </button>
          <div>Search term: {state.searchTerm}</div>
        </div>
      );
    };

    Install

    npm i @blue-tomato/use-retext

    DownloadsWeekly Downloads

    12

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    266 kB

    Total Files

    35

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar