|
1 |
| -# react-with-multiple-contexts [](https://badge.fury.io/js/react-with-multiple-contexts) [](https://www.codacy.com/app/artanik/react-with-multiple-contexts?utm_source=github.com&utm_medium=referral&utm_content=artanik/react-with-multiple-contexts&utm_campaign=Badge_Grade) |
| 1 | +# react-with-multiple-contexts [](https://badge.fury.io/js/react-with-multiple-contexts) |
2 | 2 |
|
3 | 3 | ## Why should I use it?
|
4 | 4 |
|
5 | 5 | > **tl;dr** to fix "wrapper hell" while using multiple instance of [React Context API (16.3+)](https://reactjs.org/docs/context.html#api)
|
6 | 6 |
|
7 |
| -> You have to admit that the *React Context API* is a extremely useful, if you need to get props from parent component to child component, and between them is a whole universe of nested things. |
| 7 | +> You have to admit that the *React Context API* is an extremely useful, if you need to get props from parent component to child component, and between them is a whole universe of nested things. |
8 | 8 | > But this advantage quickly disappears when you need to use more than one context at the same component level.
|
9 | 9 |
|
10 | 10 | <details>
|
@@ -81,7 +81,7 @@ export class ComponentConsumer extends React.Component {
|
81 | 81 | ## Well, what the `react-with-multiple-contexts` actually do?
|
82 | 82 |
|
83 | 83 | > The package provides you a couple of simple [HOCs](https://reactjs.org/docs/higher-order-components.html): `withContextProvider` and `withContextConsumer`.
|
84 |
| -> Each HOC return a call tree of *React.Provider* or *React.Consumer*, depending on what you want to receive. |
| 84 | +> Each HOC returns a call tree of *React.Provider* or *React.Consumer*, depending on what you want to receive. |
85 | 85 | > That *call tree* wrapped around **your component**.
|
86 | 86 | > And finally, your component can now use the *React Context API* via props.
|
87 | 87 |
|
@@ -203,7 +203,7 @@ const App = () => {
|
203 | 203 |
|
204 | 204 | ## Future with Hooks
|
205 | 205 |
|
206 |
| -As you know, hooks are an upcoming feature that lets you use state and other React features without writing a class. `useContext` is one of the hooks, and that hook can simplify consuming value from Context.Consumer with just `const context = useContext(Context);`. This is even easier than API from this package. But since it is a hook, you can use `useContext` only in functional components, and still you need to write nested providers. Although of course you can easily write something like `useProvider(Component, value)`, but I'm not sure about that yet. |
| 206 | +As you know, hooks are an upcoming feature that lets you use state and other React features without writing a class. `useContext` is one of the hooks, and that hook can simplify consuming value from Context.Consumer with just `const context = useContext(Context);`. This is even easier than API from this package. But since it is a hook, you can use `useContext` only in functional components, and still, you need to write nested providers. Although you can easily write something like `useProvider(Component, value)`, but I'm not sure about that yet. |
207 | 207 |
|
208 | 208 | > P.S. those HOCs also support [Forwarding Refs (16.3+)](https://reactjs.org/docs/forwarding-refs.html)
|
209 | 209 |
|
|
0 commit comments