https://github.com/disjukr/join-react-context

join multiple react context into one. support typescript.
https://github.com/disjukr/join-react-context

Last synced: 2 months ago
JSON representation

join multiple react context into one. support typescript.

• Host: GitHub
• URL: https://github.com/disjukr/join-react-context
• Owner: disjukr
• Created: 2018-06-30T17:42:46.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-10-01T04:46:20.000Z (over 5 years ago)
• Last Synced: 2025-03-18T12:02:20.778Z (2 months ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/join-react-context
• Size: 8.79 KB
• Stars: 25
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-list - join-react-context

README

        
# join-react-context

join multiple react context into one.

works perfectly with typescript.

## usage

```tsx

import * as React from 'react';

import {

    Providers,

    joinContext,

    joinProvider,

    joinConsumer,

} from 'join-react-context';

const contextA = React.createContext('context a');

const contextB = React.createContext('context b');

{ // providers array style

    ,

        ,

    ]}>

        {children}

    

    // is same as...

    

        

            {children}

        

    

}

{ // providers fragment style

    

        

        

    >}>

        {children}

    

}

{ // join tuple style

    type Contexts = [ typeof contextA, typeof contextB ];

    const { Provider, Consumer } = joinContext([ contextA, contextB ]);

    const App = () => (

        

            

        

    );

    const Component = () => (

        

            { ([ a, b ]) => 
{ a }, { b }
 }

        

    );

}

{ // join object style

    const { Provider, Consumer } = joinContext({ a: contextA, b: contextB });


    const App = () => (

        

            

        

    );

    const Component = () => (

        

            { ({ a, b }) => 
{ a }, { b }
 }

        

    );

}

{ // join mixed style (vice versa)

    type Contexts = [ typeof contextA, typeof contextB ];

    const Provider = joinProvider([ contextA, contextB ]);

    const Consumer = joinConsumer({ a: contextA, b: contextB });


    const App = () => (

        

            

        

    );

    const Component = () => (

        

            { ({ a, b }) => 
{ a }, { b }
 }

        

    );

}

```