Package Exports
- utility-kits
Readme
Utils Function
Develop by Lam Nguyen My github
A comprehensive collection of basic utility functions including isEmpty, get,set, merge, deepClone, and more. This library aims to simplify common operations in JavaScript/TypeScript applications.
Installation
#NPM
npm install utility-kits
#YARN
yarn add utility-kitsTable of Contents
Usage
isEmpty
import { isEmpty } from "utility-kits";
// Check value string , array , object
//Output isEmpty('') => true
//Output isEmpty({}) => true
//Output isEmpty([]) => true
//Output isEmpty(['Banana']) => false
get
import { get } from "utility-kits";
interface Order {
id : number
product : string
}
interface Address {
street: string;
city: string;
postalCode: string;
}
interface Customer {
id: number;
name: string;
address: Address;
isActive: boolean;
}
const customer: Customer = {
id: 1,
name: "Alice",
address: {
street: "123 Main St",
city: "Anytown",
postalCode: "12345"
},
isActive: true,
orders : [
{
id :1,
product :"Product A"
},
{
id :1,
product :"Product A"
}
]
}
get(customer,"name")
// Output "Alice"
get(customer,"address.street")
// Output "123 Main St"
get(customer,"orders.0.product")
// Output "Product A"
set
import { set } from "utility-kits";
interface Address {
street: string;
city: string;
postalCode: string;
}
interface Customer {
id: number;
name: string;
address: Address;
isActive: boolean;
}
const customer: Customer = {
id: 1,
name: "Alice",
address: {
street: "123 Main St",
city: "Anytown",
postalCode: "12345"
},
}
set(customer,"name","Tom")
/* Output
{
id: 1,
name: "Tom",
address: {
street: "123 Main St",
city: "Anytown",
postalCode: "12345"
},
}
*/
set(customer,"address.street","124 Sub St")
/* Output
{
id: 1,
name: "Tom",
address: {
street: "124 Sub St",
city: "Anytown",
postalCode: "12345"
},
}
*/Show
Usage:
import { Show } from "utility-kits";
const Example = () => {
const [count ,setCount] = React.useState(0);
return (
<Show>
<Show.When isTrue={count > 2}>
Count is greater than 1
</Show.When>
<Show.When isTrue={count > 0}>
Count is greater than 0
</Show.When>
<Show.Else>
Count is equal to 0
</Show.Else>
</Show>
)
}
Each
Usage:
import { Each } from "utility-kits"
interface Todo {
id : number
title : string
}
const Parent = () => {
const todos :Todo[] = [
{id :1 , title :"Todo 1"},
{id : 2 , title : "Todo 2"}
]
return (
<Child todos={todos} />
)
}
const Child = ({ todos } : {todos : readonly Todo[]}) => {
return (
<Each
list={todos}
render={(item : Todo, index) => (
<li key={item.id}>{item.title}</li>
)}
empty={<div>Empty content</div>}
/>
)
}