Typescript usage

Installation

The Killua package lives in npm (opens in a new tab). To install the latest stable version, run the following command:

# npm
npm install killua
 
# yarn
yarn add killua

Create thunder

⚠️

Note that thunder refers to a key within local storage.

⚠️

Certainly, sensitive data should not be stored on local storage. The purpose of encrypting local storage in this method is to prevent regular users from having direct access to the data stored in local storage and also to prevent them from modifying it directly.

Create a thunders directory for the thunder configuration.
Create the thunder configuration file, for example: counter.ts.
Set up the configuration:

thunders/counter.ts

import { thunder } from "killua";
 
const thunderCounter = thunder({
  key: "counter", // unique key for local storage, without starting with "thunder"
  encrypt: false, // if true, the data will be encrypted before being stored in local storage
  default: 1 as number, // initial value for the thunder
  expire: 1, // // null to disable the expiration timer, or a number indicating the expiration time in minutes
  reducers: { // optional
    increment: (thunder: number) => thunder + 1,
    incrementWithPayload: (thunder: number, payload: number) => thunder + payload,
    reset: () => 1,
  },
  selectors: { // optional
    getCounterPlusOne: (thunder: number) => thunder + 1,
    getCounterPlusPayload: (thunder: number, payload: number) => thunder + payload,
  },
});
 
export { thunderCounter };

Use thunder

⚠️

all desctructer property from thunder config is optional.

component/counter.ts

import { thunderCounter } from "../thunders/counter";
import { useKillua } from "killua";
 
const Counter = () => {
  const {
    thunder: thunderCounterState,
    setThunder: thunderCounterSetState,
    reducers: thunderCounterReducers,
    selectors: thunderCounterSelectors,
  } = useKillua(thunderCounter);
 
  return (
    <>
      <h2> Thunder </h2>
      <h2>Counter: {thunderCounterState}</h2>
      <hr />
      <h2> Set Thunder </h2>
      <button onClick={() => thunderCounterSetState((prev: number) => prev + 1)}>Set Thunder with callback</button>
      <button onClick={() => thunderCounterSetState(12)}>Set Thunder without callback</button>
      <hr />
      <h2> Reducers </h2>
      <button onClick={() => thunderCounterReducers.increment()}>Increment</button>
      <button onClick={() => thunderCounterReducers.incrementWithPayload(5)}>Increment with payload</button>
      <button onClick={() => thunderCounterReducers.reset()}>Reset</button>
      <hr />
      <h2> Selectors </h2>
      <button onClick={() => console.log(thunderCounterSelectors.getCounterPlusOne())}>Get counter with plus one</button>
      <button onClick={() => console.log(thunderCounterSelectors.getCounterPlusPayload(10))}>Get counter with plus payload</button>
    </>
  )
};
 
export default Counter;

JavaScript