https://github.com/dgpedro/react-pretty-context

Simple and easy way to manage react context state
https://github.com/dgpedro/react-pretty-context

actions context context-selector dispatcher hooks react react-context

Last synced: 9 days ago
JSON representation

Simple and easy way to manage react context state

• Host: GitHub
• URL: https://github.com/dgpedro/react-pretty-context
• Owner: dgpedro
• License: mit
• Created: 2021-02-17T19:58:00.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-03-03T22:44:25.000Z (almost 4 years ago)
• Last Synced: 2024-04-24T18:08:14.055Z (10 months ago)
• Topics: actions, context, context-selector, dispatcher, hooks, react, react-context
• Language: TypeScript
• Homepage:
• Size: 306 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-pretty-context

Simple and easy way to manage react context state.

This package makes use of [use-context-selector](https://github.com/dai-shi/use-context-selector#use-context-selector) and allows context state updates by dispatching defined actions.

## Install

---

**NOTE**: _As mentioned in [use-context-selector](https://github.com/dai-shi/use-context-selector#install) it's also required to install peer dependencies:_

```

npm install --save react-pretty-context react scheduler

```

---

## Usage

`context-config.js`

```javascript

import { createContext } from "react-pretty-context";

// Context object that will be used as default

const initialContext = {

  firstName: "Default first name",

  lastName: "Default last name",

};

// Defined actions that perform context state updates

// For every action the first argument is always the current context object

// Every action returns a new context object updated or the current one

const actions = {

  setFirstName: (context, firstName) => {

    // New object which reflects the update

    return { ...context, firstName };

  },

  setLastName: (context, lastName) => {

    // Context update can be avoided by returning current context object

    if (context.firstName === "foo") {

      return context;

    }

    return { ...context, lastName };

  },

};

export const {

  ContextProvider, // Context provider

  defaultContext, // For convenience :)

  useActions, // Hook to access actions object

  useContextSelector, // Hook to select context using a selector function

} = createContext({

  actions,

  defaultContext: initialContext,

});

```

`some-component.jsx`

```javascript

import React from "react";

import { ContextProvider } from "./context-config";

const SomeComponent = () => {

  return (

      

        

      

  );

}

```

`personal-details.jsx`

```javascript

import React from "react";

import { useContextSelector, useActions } from "./context-config";

const PersonalDetails = () => {

  // useContextSelector accepts as first argument the context selector function

  // Only when the return value/reference changes, the component updates

  const firstName = useContextSelector((context) => context.firstName);

  const lastName = useContextSelector((context) => context.lastName);

  // Direct access to context dispatch actions

  const { setFirstName, setLastName } = useActions();

  const onChangeFirstName = (ev) => {

    // Dispatch action

    setFirstName(ev.target.value);

  };

  const onChangeLastName = (ev) => {

    // Dispatch action

    setLastName(ev.target.value);

  };

  return (

    


      


        First name:

        

      

      


        Last name:

        

      

    

  );

};

```


## Demo

Simple demo can be found [here](https://dgpedro.github.io/react-pretty-context/).