https://github.com/hlhr202/react-combine-provider

combine react providers in ease
https://github.com/hlhr202/react-combine-provider

constate hooks react react-context react-hooks react-state redux unstated

Last synced: 5 days ago
JSON representation

combine react providers in ease

• Host: GitHub
• URL: https://github.com/hlhr202/react-combine-provider
• Owner: hlhr202
• License: mit
• Created: 2019-05-28T11:16:16.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T05:51:47.000Z (almost 2 years ago)
• Last Synced: 2024-10-12T10:19:19.683Z (26 days ago)
• Topics: constate, hooks, react, react-context, react-hooks, react-state, redux, unstated
• Language: TypeScript
• Size: 2.88 MB
• Stars: 32
• Watchers: 3
• Forks: 0
• Open Issues: 27
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Combine Provider

[![npm](https://img.shields.io/npm/v/react-combine-provider.svg)](https://www.npmjs.com/package/react-combine-provider)

[![Coverage Status](https://coveralls.io/repos/github/hlhr202/React-Combine-Provider/badge.svg?branch=master)](https://coveralls.io/github/hlhr202/React-Combine-Provider?branch=master)

[![CircleCI](https://circleci.com/gh/hlhr202/React-Combine-Provider.svg?style=shield)](https://circleci.com/gh/hlhr202/React-Combine-Provider)

![TypeDefine](https://img.shields.io/npm/types/chalk.svg)

[![License](https://img.shields.io/npm/l/react-combine-provider.svg)](https://github.com/hlhr202/React-Combine-Provider/blob/master/LICENSE)

Combine react providers in ease  

Requires React >= 16.8.0  

Fully support [unstated-next](https://github.com/jamiebuilds/unstated-next) and [constate](https://github.com/diegohaz/constate)  

## Install

```

npm install --save react-combine-provider

```

## Usage

- unstated

```jsx

import React, { useState } from 'react';

import ReactDOM from 'react-dom';

import { createContainer } from 'unstated-next';

import { combineProviders } from 'react-combine-provider';

const useCounter1 = (initialState = 1) => {

    const [count, setCount] = useState(initialState);

    const decrement = () => setCount(count - 1);

    const increment = () => setCount(count + 1);

    return { count, decrement, increment };

};

const Counter1 = createContainer(useCounter1);

const useCounter2 = (initialState = 2) => {

  const [count, setCount] = useState(initialState);

  const decrement = () => setCount(count - 2);

  const increment = () => setCount(count + 2);

  return { count, decrement, increment };

};

const Counter2 = createContainer(useCounter2);

function CounterDisplay1() {

  const counter1 = Counter1.useContainer();

  console.log('rendering');

  return (

    


      
counter display 1

      
counter 1

      -

      {counter1.count}

      +

      


    

  );

}


function CounterDisplay2() {

  const counter1 = Counter1.useContainer();

  const counter2 = Counter2.useContainer();

  return (

    


      
counter display 2

      
counter 1

      -

      {counter1.count}

      +

      
counter 2

      -

      {counter2.count}

      +

      


    

  );

}


const StateProviders = combineProviders([

  [Counter1.Provider, { initialState: 5 }],

  Counter2.Provider,

]);

function App() {

  return (

    

      

      


      

    

  );

}

ReactDOM.render(, document.getElementById('root'));

```

## TODO

  - [] reference of hooks in another hooks

  - [] dynamic hooks injection