Gathering detailed insights and metrics for killua
Gathering detailed insights and metrics for killua
Gathering detailed insights and metrics for killua
Gathering detailed insights and metrics for killua
killua-db
Сверх маленькая и простенькая база данных, с легким функицоналом. Маловестная база данных.
killua-beta
killua is a local-storage management library for React applications.
eslint-plugin-killua
ESLint configuration used by Killua App Template
babel-preset-killua
A collection of presets derived off create react app
killua is a local-storage management library for React applications.
npm install killua
Typescript
Module System
70.4
Supply Chain
98.6
Quality
82.7
Maintenance
100
Vulnerability
100
License
TypeScript (82.63%)
MDX (7.59%)
CSS (6.17%)
JavaScript (2.63%)
HTML (0.85%)
Shell (0.12%)
Total Downloads
2,334
Last Day
1
Last Week
6
Last Month
36
Last Year
1,667
61 Stars
288 Commits
2 Forks
1 Watching
1 Branches
2 Contributors
Minified
Minified + Gzipped
Latest Version
0.4.11
Package Id
killua@0.4.11
Unpacked Size
111.86 kB
Size
18.55 kB
File Count
78
Publised On
07 Mar 2024
Cumulative downloads
Total Downloads
Last day
0%
1
Compared to previous day
Last week
-25%
6
Compared to previous week
Last month
-36.8%
36
Compared to previous month
Last year
149.9%
1,667
Compared to previous year
killua is a local-storage management library for React applications.
To install the latest stable version, run the following command:
1# npm 2npm install killua 3 4# pnpm 5pnpm install killua 6 7# yarn 8yarn add killua
Whatever the
useKillua
hook returns, theslice
function also returns.
Use the useKillua hook within the React framework, and as long as you don't have access to it, use the slice function.
that
slice
refers to a key within localStorage.
slices
directory for the thunder configuration.counter.ts
.1import { slice } from 'killua'; 2 3export const counterSlice = slice({ 4 key: 'counter', // unique key for localStorage 5 defaultClient: 1 as number // default value for client-side application 6});
useKillua
hook :1import { useKillua } from "killua"; 2import { counterSlice } from "@/slices/counter"; 3 4export default function Component() { 5 const localstorageCounter = useKillua(counterSlice); 6 return ( 7 <div> 8 <p>{counterSlice.get()}</p> 9 </div> 10 ) 11};
slice
function :1import { counterSlice } from '@/slices/counter'; 2 3export function getCounter() { 4 return counterSlice.get(); 5}
useKillua
hook :1import { useKillua } from "killua"; 2import { counterSlice } from "@/slices/counter"; 3 4export default function Component() { 5 const localstorageCounter = useKillua(counterSlice); 6 return ( 7 <div> 8 {/* without callback */} 9 <button onClick={() => counterSlice.set(0)}>Set counter to zero</button> 10 {/* with callback */} 11 <button onClick={() => counterSlice.set((prev) => prev + 1)}>Increment counter</button> 12 </div> 13 ) 14};
slice
function :1import { counterSlice } from '@/slices/counter'; 2 3// without callback 4export function setCounterToZero() { 5 counterSlice.set(0); 6} 7 8// with callback 9export function incrementCounter() { 10 counterSlice.set(prev => prev + 1); 11}
1import { slice } from 'killua'; 2 3export const counterSlice = slice({ 4 key: 'counter', 5 defaultClient: 1 as number, 6 selectors: { 7 getPlusOne: (value) => value + 1, 8 getPlusWithPayload: (value, payload: number) => value + payload 9 } 10});
useKillua
hook :1import { useKillua } from "killua"; 2 3export default function Component() { 4 const localstorageCounter = useKillua(counterSlice); 5 return ( 6 <div> 7 <p>{localstorageCounter.getPlusOne()}</p> {/* without payload */} 8 <p>{localstorageCounter.getPlusWithPayload(5)}</p> {/* with payload */} 9 </div> 10 ) 11};
slice
function :1import { counterSlice } from '@/slices/counter'; 2 3// without payload 4export function getCounterWithPlusOne() { 5 return counterSlice.getPlusOne(); 6} 7 8// with payload 9export function getCounterWithPlusWithPayload() { 10 return counterSlice.getPlusWithPayload(5); 11}
1import { slice } from 'killua'; 2 3export const counterSlice = slice({ 4 key: 'counter', 5 defaultClient: 1 as number, 6 reducers: { 7 increment: (value) => value + 1, 8 incrementWithPayload: (value, payload: number) => value + payload 9 } 10});
useKillua
hook :1import { useKillua } from "killua"; 2 3export default function Component() { 4 const localstorageCounter = useKillua(counterSlice); 5 return ( 6 <div> 7 <button onClick={() => localstorageCounter.increment()}>Increment counter</button> {/* without payload */} 8 <button onClick={() => localstorageCounter.incrementWithPayload(5)}>Increment counter with payload</button> {/* with payload */} 9 </div> 10 ) 11};
slice
function :1import { counterSlice } from '@/slices/counter'; 2 3// without payload 4export function incrementCounter() { 5 counterSlice.increment(); 6}
As long as the initial server-side rendering occurs and there is no access to localStorage,
defaultServer
will be returned. Later, when the client-side rendering takes place, data will be fetched from localStorage and returned.
As long as
defaultServer
exists in the config, both theuseKillua
hook and theslice
function will return a property namedisReady
.
If this value isfalse
, it means that it is server-side and localStorage is not accessible, and the returned value isdefaultServer
.
If this value is true, it means that it is client-side and localStorage isaccessible, and the fetched value is from localStorage.
defaultServer
to the slice configuration :1import { slice } from 'killua'; 2 3export const counterSlice = slice({ 4 key: 'counter', 5 defaultClient: 1 as number, 6 defaultServer: 2 // default value for server-side application 7});
useKillua
hook :1'use client'; 2 3import { useKillua } from "killua"; 4 5export default function Component() { 6 const localstorageCounter = useKillua(counterSlice); 7 return ( 8 <div> 9 {localstorageCounter.isReady ? <p>{localstorageCounter.get()}</p> : <p>Loading...</p>} 10 </div> 11 ) 12};
slice
function :1import { counterSlice } from '@/slices/counter'; 2 3export function getCounter() { 4 // if is server-side ? return defaultServer : return localStorage value 5 return counterSlice.get(); 6} 7 8// with payload 9export function incrementCounterWithPayload() { 10 counterSlice.incrementWithPayload(5); 11}
As long as obsfacte is present in the slice config, your data is not protected but merely obfuscated.
Avoid placing sensitive data on localStorage.
1import { slice } from 'killua'; 2 3export const counterSlice = slice({ 4 key: 'counter', 5 defaultClient: 1 as number, 6 obsfacte: true // obfuscate data in localStorage 7});
If the localStorage data expires at the moment when a user is on the website and the
useKillua
hook is in use, the data will be immediately removed from localStorage. Subsequently, theuseKillua
hook will update and return thedefaultClient
value.
If the user enters the site and the data has already expired, the
defaultClient
value will be returned.
1import { slice } from 'killua'; 2 3export const counterSlice = slice({ 4 key: 'counter', 5 defaultClient: 1 as number, 6 expire: '1d-9h-24m-10s' // expire time for localStorage data (1 day, 9 hours, 24 minutes, 10 seconds) 7});
If
schema
exists in the configuration, when the localStorage is updated usingset
orreducers
, the data will be validated against thatschema
. If it is not valid, it will not be set on the localStorage.
If
schema
is exists in the configuration, when the localStorage data is retrieved usingselectors
orget
, and if it is validated against theschema
and found to be invalid, thedefaultClient
value will be returned instead.
1import { slice } from 'killua'; 2 3export const counterSlice = slice({ 4 key: 'counter', 5 defaultClient: 1 as number, 6 schema: z.number().min(0).max(10) // zod schema or yup schema 7});
No vulnerabilities found.
No security vulnerabilities found.