Igris NPM | npm.io

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 receives set and get 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.