Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/imenesesl/sagittariux
OPEN SOURCE | Super lightweight package to manage your application status
https://github.com/imenesesl/sagittariux
context hooks react reactjs sagittariux
Last synced: 3 days ago
JSON representation
OPEN SOURCE | Super lightweight package to manage your application status
- Host: GitHub
- URL: https://github.com/imenesesl/sagittariux
- Owner: imenesesl
- Created: 2019-11-24T22:18:04.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:18:26.000Z (almost 2 years ago)
- Last Synced: 2024-04-16T08:54:39.669Z (7 months ago)
- Topics: context, hooks, react, reactjs, sagittariux
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/sagittariux
- Size: 1.95 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sagitttariux
#### `Super lightweight package to manage your application status`
- ## Provider
This component is in charge of managing the state of all their children in the tree, to manage a general state of the entire application it is recommended to add it at the top of the gerarchy
#### Params
```ts
const Provider: (provider: ProviderProps) => JSX.Element
```
`store` Object that will contain the different stores, these objects are segmented by reducers
`children` Displayed whatever you include between the opening and closing tags when invoking a component
#### Warning ⚠️
The `store` object can only be built within a React component
#### Example
```tsx
const App = () => {
const store = {
test: useReducer(testReducer, initialStateTest),
}
return (
)
}
export default App
```
- ## connect
### Params
```ts
const connect: (stateProps: (state: Reducers) => Object, dispatchProps: Dispatch) => (Component: any) => typeof (Anonymous class)
```
The `connect()` function connects a React component to a Sagittariux store.
It provides your connected component with the parts of the data that it needs from the store and the functions that it can use to send actions to the store.
It does not modify the class of component passed to it; instead it returns a new connected component class that wraps the component you passed to it.
#### Example
```tsx
/*A*/
const RightContainer = ({ add, substract }) => {
return (
add(1)}>ADD
substract(1)}>SUBSTRACT
)
}
const mapDispatchToProps = (dispatch: Function) => ({
add: (number: number) => dispatch(addAction(number)),
substract: (number: number) => dispatch(substractAction(number)),
})
export default connect(null, mapDispatchToProps)(RightContainer)
/*B*/
const LeftContainer = ({ counter }) => {
return (
{counter}
)
}
const mapStateToProps = (state: Reducers) => ({
counter: state.test["counter"],
})
export default connect(mapStateToProps, null)(LeftContainer)
```
## Get Started :rocket:
- Add the following in the dependencies of your package.json
```bash
npm install sagittariux
```
- Ready to use
```ts
import { Provider, connect } from "sagittariux"
```
## Run Demo :shipit:
- Clone this repository
```bash
git clone https://github.com/imenesesl/sagittariux.git
```
- Open project
```bash
cd sagittariux
```
- Execute the following line
```bash
npm i
```
- Run demo
```bash
npm run demo
```