https://github.com/targos/react-mutable-context

Create a React context that can be accessed and mutated with hooks
https://github.com/targos/react-mutable-context

Last synced: 13 days ago
JSON representation

Create a React context that can be accessed and mutated with hooks

• Host: GitHub
• URL: https://github.com/targos/react-mutable-context
• Owner: targos
• License: mit
• Created: 2018-12-07T14:42:15.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-04-12T11:53:01.000Z (almost 6 years ago)
• Last Synced: 2024-12-27T13:50:20.933Z (23 days ago)
• Language: TypeScript
• Homepage:
• Size: 254 KB
• Stars: 6
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - react-mutable-context

README

        
# react-mutable-context

[![NPM version][npm-image]][npm-url]

[![build status][travis-image]][travis-url]

[![Test coverage][codecov-image]][codecov-url]

[![npm download][download-image]][download-url]

Create a React context that can be accessed and mutated with hooks.

## Installation

`$ npm install --save react-mutable-context`

## Usage

```js

import { createMutableContext } from 'react-mutable-context';

const context = createMutableContext('black');

const { Provider: ColorProvider, use: useColor } = context;

function App() {

  return (

    

      

    

  );

}

function ColorUser() {

  const [color, setColor] = useColor();

  const handleClick = () => setColor('red');

  return (

    


      
Using color from the context!

      


        

          Change color

        

      

    

  );

}


// The value can also be read and changed outside of React components

setTimeout(() => {

  console.log(context.getValue()); // 'black'

  context.setValue('green');

  console.log(context.getValue()); // 'green'

}, 1000);

```

## License

[MIT](./LICENSE)

[npm-image]: https://img.shields.io/npm/v/react-mutable-context.svg?style=flat-square

[npm-url]: https://www.npmjs.com/package/react-mutable-context

[travis-image]: https://img.shields.io/travis/targos/react-mutable-context/master.svg?style=flat-square

[travis-url]: https://travis-ci.org/targos/react-mutable-context

[codecov-image]: https://img.shields.io/codecov/c/github/targos/react-mutable-context.svg?style=flat-square

[codecov-url]: https://codecov.io/gh/targos/react-mutable-context

[download-image]: https://img.shields.io/npm/dm/react-mutable-context.svg?style=flat-square

[download-url]: https://www.npmjs.com/package/react-mutable-context