https://github.com/devnax/state-range
https://github.com/devnax/state-range
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/devnax/state-range
- Owner: devnax
- License: mit
- Created: 2022-02-15T12:16:10.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-12-04T18:54:32.000Z (over 2 years ago)
- Last Synced: 2025-01-22T00:41:22.657Z (over 1 year ago)
- Language: TypeScript
- Size: 1.22 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### State Range
`state-range` is a very powerfull react state management system library. you can use it with your big application.
### How to use
`usersHandler.js`
```js
import {Store} from 'state-range'
class Users extends Store{
...
}
export default new Users
```
`UserList.jsx`
```jsx
import {withStore} from 'state-range'
import Users from 'usersHandler'
const UserList = () => {
const items = Users.getAll()
return (
{
items.map(item => ...)
}
)
}
export default withStore(UserList)
```
```jsx
import {Store, withStore} from 'state-range'
import UserList from 'UserList'
import User from 'usersHandler'
const App = () => {
return(
{
User.insert({
name: "",
email: ""
})
}}>Add Item
)
}
```
## Methods
```js
import User from 'usersHandler'
const users = User.find({name: "nax"})
// with query method
const users = User.find({email: "$startWith(nax@)"})
// search
const users = User.find({email: "$search(nax)"})
```
### Query Methods
| Name | Description | Use |
| --------- | ---------------------------------- | --------------------------- |
| equal | `$equal()`- this is default method | `{name: "$equal(abc)"}` |
| notEqual | `$notEqual()` | `{name: "$notEqual(abc)"}` |
| startWith | `$startWith()` | `{name: "$startWith(abc)"}` |
| endWith | `$endWith()` | `{name: "$endWith(abc)"}` |
| hasValue | `$hasValue()` | `{name: "$hasValue()"}` |
| search | `$search()` | `{name: "$search(abc)"}` |
## withStore
you can pass two args in this function. first is your component and the second is callback. in that callback you need to return an array
```js
import {withStore} from 'state-range'
withStore(Comp, () => {
return [...]
})
```
## withMemo
you can memoize your component. you can pass two args in this function. first is your component and the second is callback. in that callback you need to return an array
```js
import {withMemo} from 'state-range'
withMemo(Comp, () => {
return [...]
})
```