docs(core): Update documentation and usage

README.md

@@ -3,7 +3,8 @@
 This package was created to help clean up the nasty code you get from taking advantage of React Context API.
 
 Transform your code from something that looks like this
-```html
+
+```tsx
   <ContextProvider1>
     <ContextProvider2>
       <ContextProvider3>
@@ -16,7 +17,8 @@ Transform your code from something that looks like this
 ```
 
 to something like this
-```html
+
+```tsx
   <MultiProvider
     providers={[
       <ContextProvider1/>,
@@ -31,28 +33,51 @@ to something like this
 ## Installation
 
 To install the package, run the following command in your terminal
+
 ```shell
   npm install react-multi-provider
 ```
 
 ## Usage
 
 To use this component it is really simple and easy. Start by importing it after installation.
+
 ```javascript
-  import MultiProvider from 'react-multi-provider';
+import { MultiProvider } from "react-multi-provider";
 ```
 
 Then take the nested providers and pass them into a `providers` prop.
-```html
-  <MultiProvider providers={[
-    <FooContextProvider value="foo context value"/>,
-    <BarContextProvider value="bar context value"/>
-  ]}>
-    <ExampleComponent/>
-  </MultiProvider>
+
+```tsx
+<MultiProvider
+  providers={[
+    <FooContextProvider value="Jeff" />,
+    <BarContextProvider value={400} />,
+  ]}
+>
+  <ExampleComponent />
+</MultiProvider>
+```
+
+To consume the context, leverage the `useContext` hook.
+
+```tsx
+export const ChildComponent = () => {
+  const fooValue = useContext(FooContext);
+  const barValue = useContext(BarContext);
+
+  return (
+    <>
+      <p>
+        Hello, I am {fooValue} and I am {barValue} old
+      </p>
+    </>
+  );
+};
 ```
 
-Check out a more detailed example in the `examples/src/` directory of this repo.
+Check out a more detailed example in the `examples/` directory of this repo.
 
 ## Notes
-For those of you who are Flutter fans will know that the inspiration for this package came from `provider`. Special thanks to the author!
+
+For those of you who are Flutter fans will know that the inspiration for this package came from `provider`. Special thanks to the author!

examples/context/Custom.context.js

@@ -1,10 +1,4 @@
-import React from 'react';
+import React from "react";
 
-const FooContext = React.createContext({});
-const BarContext = React.createContext({});
-
-export const FooProvider = FooContext.Provider;
-export const FooConsumer = FooContext.Consumer;
-
-export const BarProvider = BarContext.Provider;
-export const BarConsumer = BarContext.Consumer;
+export const FooContext = React.createContext("");
+export const BarContext = React.createContext(0);

examples/index.js

@@ -1,18 +1,13 @@
-import React from "react";
+import React, { useContext } from "react";
 import { render } from "react-dom";
-import { MultiProvider } from "../dist/react-multi-provider";
+import { MultiProvider } from "react-multi-provider";
 // Example Context
-import {
-  FooConsumer,
-  FooProvider,
-  BarConsumer,
-  BarProvider,
-} from "./context/Custom.context";
+import { BarContext, FooContext } from "./context/Custom.context";
 
 const App = () => {
   const providerList = [
-    <FooProvider value="Context Coming from Foo" />,
-    <BarProvider value="Context Comming from Bar" />,
+    <FooContext.Provider value="Jeff" />,
+    <BarContext.Provider value={999} />,
   ];
 
   return (
@@ -27,11 +22,14 @@ const Parent = (props) => {
 };
 
 const Child = () => {
+  const fooValue = useContext(FooContext);
+  const barValue = useContext(BarContext);
+
   return (
     <>
-      <h3>Consumer</h3>
-      <FooConsumer>{(fooContext) => <p>{fooContext}</p>}</FooConsumer>
-      <BarConsumer>{(barContext) => <p>{barContext}</p>}</BarConsumer>
+      <p>
+        Hello, I am {fooValue} and I am {barValue} old
+      </p>
     </>
   );
 };