react-hoax

    2.0.2 • Public • Published

    React Hoax

    Idiomatic resourceful context.

    Installation

    React Hoax requires React 16.8.3 or later.

    npm install --save react-hoax
    

    This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.

    If you don’t yet use npm or a modern module bundler, and would rather prefer a single-file UMD build that makes react-hoax available as a global object, you can grab a pre-built version from cdnjs. We don’t recommend this approach for any serious application, as most of the libraries complementary to React Hoax are only available on npm.

    Introduction

    React Hoax itself is a small state management library. It includes some opinionated patterns that help you use React context more effectively.

    It helps simplify a lot of common use cases in the React world, including providers setup, creating reducers and selectors.

    It also helps with state normalization for resources.

    For multiple resources here

    The byId pattern is persuaded, check the initialState.

    Example,

      import { makeCollectionHoax } from "react-hoax";
    
      const {
        Provider,
        useCollection,
        useMember,
        useSelector,
        useAction,
        useResourceSelector
      } = makeCollectionHoax("myCustomResource", {
        resourceOptions: {
          initialState: {
            title: "",
            description: "",
            keywords: [],
            industry: "",
            offer: ""
          }
        }
      });
    

    As you can see, React Hoax provides you with the essentials to start coding right away. This will create a Context provider, with the state:

    {
      loading: true,
      loaded: false,
      processing: false,
      byId: {},
      ids: []
    }
    

    Which works for multiple resources of the same type. Adding a resource of id=1, will change the state to:

    {
      loading: false,
      loaded: true,
      processing: false,
      byId: {
        1: {
          loading: true,
          loaded: false,
          processing: false,
          errors: {},
          pristine: {},
    
          // plus our custom attributes needed
          title: "",
          description: "",
          keywords: [],
          industry: "",
          offer: ""
        }
      },
      ids: [1]
    }
    

    For a single resource here

    It keeps it simple, check the initialState.

    Example,

    import { makeMemberHoax } from "react-hoax";
    
    const initialState = {
      name: ""
    };
    
    const UserHoax = makeMemberHoax("user", { initialState });
    const NameField = UserHoax.Field.Input({fieldKey: "name"});
    
    const UserForm = () => (
      <UserHoax.Provider>
        <NameField />
      </UserHoax.Provider>
    );
    

    Actions

    React Hoax provides global actions for the everyday needs:

    initialize
    update
    updateBatch
    updateOnChange
    reset
    resetPristine
    resetPristineKey
    startFetch
    doneFetch
    failFetch
    startProcess
    doneProcess
    

    but you can add more yourself.

    documentation is coming soon...

    Reducers

    React Hoax provides opinionated reducers for member and collection resources. They make use the global actions, but also, are extendable.

    Hooks

    Hooks provided by the React Hoax, are of two flavors.

    Selectors

    For performant retrieving part of state (or all of it) of a resource. (i.e. useResourceSelector, useSelector) But, also, for getting the action needed for dispatch from the resource's context. (i.e. useAction)

    useMember & useCollection

    Are you bored of passing down the components tree props and actions for simple CRUD operations on the state? Those two selector hooks on steroids will save you the time and the sanity!

    Check the API of useMember:

    const [value, setValue, error, setError] = useMember({fieldKey: 'keyOnYourState'});
    

    How fun is that?

    Now check the API of useCollection (it's basically helping with values on state that are arrays)

    const {collection, setCollection, add, push, edit, remove, reorder, error, setError} = useCollection({fieldKey: 'keyOnYourState'});
    

    Fields

    COMING SOON

    Should You Use React Hoax?

    Well yes! Just kidding, of course, check Redux - same applies here, more or less. Enjoy!

    License

    MIT

    Install

    npm i react-hoax

    DownloadsWeekly Downloads

    7,893

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    370 kB

    Total Files

    142

    Last publish

    Collaborators

    • novykh