Skip to content

Commit 52f61c0

Browse files
authored
Update README.md
1 parent e51252e commit 52f61c0

File tree

1 file changed

+4
-4
lines changed

1 file changed

+4
-4
lines changed

README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
# react-with-multiple-contexts [![npm version](https://badge.fury.io/js/react-with-multiple-contexts.svg)](https://badge.fury.io/js/react-with-multiple-contexts) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/a48cf25af69044bbb544275b64451d08)](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 [![npm version](https://badge.fury.io/js/react-with-multiple-contexts.svg)](https://badge.fury.io/js/react-with-multiple-contexts)
22

33
## Why should I use it?
44

55
> **tl;dr** to fix "wrapper hell" while using multiple instance of [React Context API (16.3+)](https://reactjs.org/docs/context.html#api)
66
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.
88
> But this advantage quickly disappears when you need to use more than one context at the same component level.
99
1010
<details>
@@ -81,7 +81,7 @@ export class ComponentConsumer extends React.Component {
8181
## Well, what the `react-with-multiple-contexts` actually do?
8282

8383
> 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.
8585
> That *call tree* wrapped around **your component**.
8686
> And finally, your component can now use the *React Context API* via props.
8787
@@ -203,7 +203,7 @@ const App = () => {
203203
204204
## Future with Hooks
205205
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.
207207
208208
> P.S. those HOCs also support [Forwarding Refs (16.3+)](https://reactjs.org/docs/forwarding-refs.html)
209209

0 commit comments

Comments
 (0)