feat: created example file

Author: AllanOliveiraM

README.md

@@ -45,63 +45,58 @@ It also requires `useContextUpdate` to behave better in Concurrent Mode.
 
 ```tsx
 // cats-context.tsx
-import { useState } from 'react'
+import { useState, FC } from 'react'
 
 import { createContext } from 'react-easy-context-api'
 
 type MyContext = {
-    pettedCats: number
-    currentCats: number
+  pettedCats: number
+  currentCats: number
 }
 
 const { useSelector, Provider } = createContext<MyContext>({
-    pettedCats: 0
-    currentCats: 0
+  pettedCats: 0,
+  currentCats: 0,
 })
 
-const CatsProvider = ({ children }) => {
-    const [pettedCats, setPettedCats] = useState(0)
-    const [currentCats, setCurrentCats] = useState(0)
+const CatsProvider: FC = ({ children }) => {
+  const [pettedCats, setPettedCats] = useState(0)
+  const [currentCats, setCurrentCats] = useState(0)
 
-    // ... your context logic :)
+  // ... your context logic :)
 
-    return (
-        <Provider value={{
-            pettedCats,
-            currentCats
-        }}>
-            {children}
-        </Provider>
-    )
+  return (
+    <Provider
+      value={{
+        pettedCats,
+        currentCats,
+      }}
+    >
+      {children}
+    </Provider>
+  )
 }
 
-export {
-    CatsProvider,
-    useSelector
-}
+export { CatsProvider, useSelector }
 
 // ... in your components
 const CatsPetted = () => {
-    const catsPettedNumber = useSelector(state => state.pettedCats)
+  const catsPettedNumber = useSelector(state => state.pettedCats)
 
-    return (
-        <p>Petted cats: {catsPettedNumber}</p>
-    )
+  return <p>Petted cats: {catsPettedNumber}</p>
 }
 
 const CurrentCats = () => {
-    const currentCatsNumber = useSelector(state => state.currentCats)
+  const currentCatsNumber = useSelector(state => state.currentCats)
 
-    return (
-        <p>Current cats: {currentCatsNumber}</p>
-    )
+  return <p>Current cats: {currentCatsNumber}</p>
 }
 
 const App = () => (
-    <CatsProvider>
-        <CatsPetted />
-        <CurrentCats />
-    </CatsProvider>
+  <CatsProvider>
+    <CatsPetted />
+    <CurrentCats />
+  </CatsProvider>
 )
 ```
 
@@ -238,4 +233,4 @@ This hook return a value for BridgeProvider
 
 ## Examples
 
-Usage examples are being built.
+[See this example file](examples/cats.md).

examples/cats.md

@@ -0,0 +1,71 @@
+```tsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+// cats-context.tsx
+import { useState, FC, Dispatch, SetStateAction } from 'react'
+
+import { createContext } from 'react-easy-context-api'
+
+type MyContext = {
+  pettedCats: number
+  currentCats: number
+  setPettedCats: Dispatch<SetStateAction<number>>
+  setCurrentCats: Dispatch<SetStateAction<number>>
+}
+
+const { useSelector, Provider } = createContext<MyContext>({} as MyContext)
+
+const CatsProvider: FC = ({ children }) => {
+  const [pettedCats, setPettedCats] = useState(0)
+  const [currentCats, setCurrentCats] = useState(0)
+
+  // ... your context logic :)
+
+  return (
+    <Provider
+      value={{
+        pettedCats,
+        currentCats,
+        setPettedCats,
+        setCurrentCats,
+      }}
+    >
+      {children}
+    </Provider>
+  )
+}
+
+const CatsPetted = () => {
+  const catsPettedNumber = useSelector(state => state.pettedCats)
+  const setter = useSelector(state => state.setPettedCats)
+
+  return (
+    <div>
+      <p>Petted cats: {catsPettedNumber}</p>
+      <button onClick={() => setter(state => state + 1)}>Add one</button>
+    </div>
+  )
+}
+
+const CurrentCats = () => {
+  const currentCatsNumber = useSelector(state => state.currentCats)
+  const setter = useSelector(state => state.setCurrentCats)
+
+  return (
+    <div>
+      <p>Current cats: {currentCatsNumber}</p>
+      <button onClick={() => setter(state => state + 1)}>Add one</button>
+    </div>
+  )
+}
+
+ReactDOM.render(
+  <React.StrictMode>
+    <CatsProvider>
+      <CatsPetted />
+      <CurrentCats />
+    </CatsProvider>
+  </React.StrictMode>,
+  document.getElementById('root')
+)
+```

package.json

@@ -6,7 +6,7 @@
     "react",
     "nexpy"
   ],
-  "version": "0.0.4-beta",
+  "version": "0.1.0",
   "license": "MIT",
   "main": "dist/index.js",
   "author": "AllanOliveiraM",

tsconfig.json

@@ -17,5 +17,6 @@
     "isolatedModules": true,
     "jsx": "react-jsx"
   },
-  "include": ["src/index.tsx"]
+  "include": ["src/index.tsx"],
+  "exclude": ["examples/*"]
 }