To install the use-shared package in your React project, use npm or yarn:
npm install use-sharedor
yarn add use-sharedBegin by importing the SharedProvider component from the use-shared package:
import { SharedProvider } from "@danielkhakbaz/use-shared";Wrap your React application's root component with the SharedProvider component. Pass an initial state object as a prop to the SharedProvider. This state object will be accessible throughout your entire application:
const state = {
name: "Danial",
lastName: "Khakbaz",
profession: "Front-end Engineer",
};
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<SharedProvider state={state}>
<App />
</SharedProvider>
</React.StrictMode>
);In any component within your application, import the useShared hook from use-shared to access the shared state provided by the SharedProvider:
import { useShared } from "@danielkhakbaz/use-shared";
const App = () => {
const { data, dispatch } = useShared();
return (
<div>{/* Access and modify shared state using data and dispatch */}</div>
);
};data: This object represents the current state from the SharedProvider.
dispatch: This function allows you to update the shared state.
- main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { SharedProvider } from "@danielkhakbaz/use-shared";
const state = {
name: "Danial",
lastName: "Khakbaz",
profession: "Front-end Engineer",
};
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<SharedProvider state={state}>
<App />
</SharedProvider>
</React.StrictMode>
);- App.jsx
import { useShared } from "@danielkhakbaz/use-shared";
const App = () => {
const { data, dispatch } = useShared();
const handleClick = () => {
dispatch({ ...data, profession: "Software Engineer" });
};
return (
<div>
<p>Name: {data.name}</p>
<p>Last Name: {data.lastName}</p>
<p>Profession: {data.profession}</p>
<button onClick={handleClick}>Change Profession</button>
</div>
);
};
export default App;MIT
danieloo.com · > Danial Khakbaz · > @danielkhakbaz ·
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent