https://github.com/danielkhakbaz/use-shared

a Simple react-hook using contextAPI in order to share a state throughout the whole app.
https://github.com/danielkhakbaz/use-shared

react react-hooks react-library react-package state-management

Last synced: about 1 month ago
JSON representation

a Simple react-hook using contextAPI in order to share a state throughout the whole app.

• Host: GitHub
• URL: https://github.com/danielkhakbaz/use-shared
• Owner: Danielkhakbaz
• Created: 2024-04-14T12:06:50.000Z (10 months ago)
• Default Branch: master
• Last Pushed: 2024-11-02T12:26:05.000Z (3 months ago)
• Last Synced: 2024-11-05T13:12:50.396Z (3 months ago)
• Topics: react, react-hooks, react-library, react-package, state-management
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@danielkhakbaz/use-shared
• Size: 259 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

  


  


  Use-Shared Hook

  


  




## Installation

To install the **use-shared** package in your React project, use **npm** or **yarn**:

```jsx

npm install use-shared

```

or


```jsx

yarn add use-shared

```

## Usage

### - Import SharedProvider

Begin by importing the **SharedProvider** component from the **use-shared** package:

```jsx

import { SharedProvider } from "@danielkhakbaz/use-shared";

```

### - Wrap Your App with SharedProvider

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:

```jsx

const state = {

  name: "Danial",

  lastName: "Khakbaz",

  profession: "Front-end Engineer",

};

ReactDOM.createRoot(document.getElementById("root")).render(

  

    

      

    

  

);

```

In any component within your application, import the **useShared** hook from **use-shared** to access the shared state provided by the **SharedProvider**:

```jsx

import { useShared } from "@danielkhakbaz/use-shared";

const App = () => {

  const { data, dispatch } = useShared();

  return (

    
{/* Access and modify shared state using data and dispatch */}

  );

};

```


`data: This object represents the current state from the SharedProvider.`




`dispatch: This function allows you to update the shared state.`

### - Complete Example

- **_main.jsx_**

```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(

  

    

      

    

  

);

```

- **_App.jsx_**

```jsx

import { useShared } from "@danielkhakbaz/use-shared";

const App = () => {

  const { data, dispatch } = useShared();

  const handleClick = () => {

    dispatch({ ...data, profession: "Software Engineer" });

  };

  return (

    


      
Name: {data.name}

      
Last Name: {data.lastName}

      
Profession: {data.profession}

      Change Profession

    

  );

};


export default App;

```

## License

MIT

---

danieloo.com  ·  Danial Khakbaz  ·  @danielkhakbaz