From 5d439f26425d5da96f78a7b321414dc49bee91fd Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Tue, 3 Jan 2023 19:33:39 +0200
Subject: [PATCH] Update README.md

---
 README.md | 51 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 50 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2c8335c..dda352e 100755
--- a/README.md
+++ b/README.md
@@ -16,7 +16,56 @@ Depends on `react` as
 
 ## Usage
 
-<script src="https://gist.github.com/abouolia/1ee096d5a4df15c992c34886b9d56b56.js"></script>
+```typescript
+import React from 'react';
+import { createNextContext, useContextSelector } from 'use-context-next';
+interface AppValue {
+  firstName: string;
+  lastName: string;
+}
+
+const defaultValue = {
+  firstName: 'Ahmed',
+  lastName: 'Bouhuolia',
+};
+
+const AppContext = createNextContext<AppValue>(defaultValue);
+
+const useFirstName = () =>
+  useContextSelector<AppValue, string>(AppContext, (value) => value.firstName);
+
+const useLastName = () =>
+  useContextSelector<AppValue, string>(AppContext, (value) => value.lastName);
+
+export default function App() {
+  return (
+    <AppContext.Provider value={defaultValue}>
+      <AppContentMemo />
+    </AppContext.Provider>
+  );
+}
+
+function AppContent() {
+  return (
+    <div>
+      <FirstName />
+      <LastName />
+    </div>
+  );
+}
+
+const AppContentMemo = React.memo(AppContent);
+
+function FirstName() {
+  const firstName = useFirstName();
+  return <span>{firstName}</span>;
+}
+
+function LastName() {
+  const lastName = useLastName();
+  return <span>{lastName}</span>;
+}
+```
 
 ## FAQs