Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/danielkhakbaz/auto-versioning
- Owner: Danielkhakbaz
- Created: 2024-07-13T09:13:43.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-07-13T10:26:36.000Z (4 months ago)
- Last Synced: 2024-10-14T00:37:26.505Z (23 days ago)
- Topics: react, react-library, react-package, version-control
- Homepage:
- Size: 43 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 ·