igris
v1.0.2
Published
A lightweight, type-safe state management solution designed to make React state simple
Downloads
42
Maintainers
Readme
Igris
Igris is a small, simple, and type-safe state management solution for React and React Native. It offers efficient data persistence and seamless integration with various storage mechanisms. Designed to be lightweight and intuitive, Igris helps developers manage application state with ease and confidence.
Features
- Simple API: Straightforward and intuitive for quick setup and easy state management.
- Type-safe: Leverages TypeScript to ensure reliable and error-resistant state management.
- Synchronous & Asynchronous Storage: Flexible options to suit various application requirements.
- Efficient Data Persistence: Reliable state storage across sessions for seamless user experiences.
- Customizable Configuration: Adaptable storage and persistence options for diverse application needs.
- Seamless Integration: Easy to adopt in existing React and React Native projects.
Installation
Install Igris using npm:
npm install igris
Or using yarn:
yarn add igris
Usage
Store Example
import React from 'react';
import { createStore, createState } from 'igris';
// Create a new instance of the store with initial state and actions
export const useCount = createStore(
{ count: 0 },
({ set, get }) => ({
increment: () => set({ count: get().count + 1 }),
decrement: () => set({ count: get().count - 1 }),
})
);
// Component using the entire store
const CounterComponent = () => {
const { count, decrement, increment } = useCount();
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
};
// Component using a selector for state
const CountDisplayComponent = () => {
const count = useCount((state) => state.count);
return <p>Count: {count}</p>;
};
// Component using a selector for actions
const CountActionsComponent = () => {
const { increment, decrement } = useCount((state) => ({
increment: state.increment,
decrement: state.decrement,
}));
return (
<div>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
};
State Example
export const useDarkTheme = createState(true);
const ThemeComponent = () => {
const [isDark, setDark] = useDarkTheme();
return (
<div>
<p>Current Theme: {isDark ? 'Dark' : 'Light'}</p>
<button onClick={() => setDark(true)}>DARK</button>
<button onClick={() => setDark(false)}>LIGHT</button>
</div>
);
}
API Reference
createStore(initialState, actions)
Creates a new store with the given initial state and actions.
initialState
: An object representing the initial state of the store.actions
: A function that receivesset
andget
methods and returns an object of actions.
createState(initialValue)
Creates a new state hook with the given initial value.
initialValue
: The initial value of the state.
Advanced Usage
For comprehensive usage examples and detailed API documentation, please visit our official documentation site.
Contributing
We welcome contributions from the community! If you encounter any issues or have suggestions for improvement, please feel free to open an issue or submit a pull request on the Igris GitHub repository.
Support
If you find Igris helpful, consider supporting its development:
Your support helps maintain and improve Igris for the entire community.
License
This project is licensed under the MIT License.
Made with ❤️ by Alok Shete