Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/danielkhakbaz/auto-versioning

a simple package that with installing it you can change the version of your npm package simply.
https://github.com/danielkhakbaz/auto-versioning

react react-library react-package version-control

Last synced: about 19 hours ago
JSON representation

a simple package that with installing it you can change the version of your npm package simply.

Awesome Lists containing this project

README

        


use shared's logo




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  ·