Untitled

 avatar
unknown
typescript
2 years ago
1.0 kB
4
Indexable
import { useKillua } from "killua-dev";
import { createSlice } from "killua-dev";

const counterSlice = createSlice<number>({
  key: "counter",
  ssr: false,
  default: 1,
  expire: null,
  encrypt: true,
  events: {
    onInitialize: (value) => {
      console.log("%c onInitialize",'color: cyan', value);
    },
    onChange: (value) => {
      console.log("%c onChange",'color: cyan', value);
    },
    onExpire: (value) => {
      console.log("%c onExpire",'color: cyan', value);
    },
  },
});

export default function ComponentC() {
  const localstorageCounter = useKillua(counterSlice);
  return (
    <div>
      <div>
        <button
          onClick={() => localstorageCounter.set(localstorageCounter.get - 1)}
        >
          increment
        </button>
        <span>{localstorageCounter.get}</span>
        <button onClick={() => localstorageCounter.set((prev) => prev + 1)}>
          increment
        </button>
      </div>
    </div>
  );
}
Editor is loading...
Leave a Comment