@benjaminnoufel/tools
v0.4.1
Published
It's a different collection of tools.
Downloads
8
Readme
@benjaminnoufel/tools
It's a different collection of tools.
Requirements
Installation
NPM
$ npm install --save @benjaminnoufel/tools
Yarn
$ yarn add @benjaminnoufel/tools
Usage
Use Validator
import {phoneNumberIsValid, passwordIsValid, emailIsValid} from "@benjaminnoufel/tools";
import {useState} from "react";
const App = () => {
const [state, setState] = useState({ password: null, phone: null, email: null})
const handleChange = (e) => {
if (e.target.name === "phone" && phoneNumberIsValid(state.phone)) {
setState({
...state,
phone: e.target.value
})
}
if (e.target.name === "password" && passwordIsValid(state.password)) {
setState({
...state,
password: e.target.value
})
}
if (e.target.name === "email" && emailIsValid(state.email)) {
setState({
...state,
email: e.target.value
})
}
}
return (
<>
<input placeholder="Email" type="email" name="email" value={state.email} onChange={handleChange} />
<input placeholder="Password" type="password" name="password" value={state.password} onChange={handleChange} />
<input placeholder="phone number" type="text" name="phone" value={state.phone} onChange={handleChange} />
</>
);
}
Use Format
import {formatCurrency, formatDate, formatNumber} from "@benjaminnoufel/tools";
const App = () => {
return (
<>
<p>Price: {formatCurrency("fr-FR", "EUR", 125.89)}</p>
<p>Order date: {formatDate("fr-FR", "01/01/1970")} </p>
<p>Number of items: {formatNumber("fr-FR", 2, 4)} </p>
</>
);
}
Use path
import {normalizePath} from "@benjaminnoufel/tools";
const App = () => {
const url = "/static//image/logo.png"
return (
<>
<p>Url of logo: http://localhost/{normalizePath(url)} </p>
<p>Order date: {formatDate("fr-FR", "01/01/1970")} </p>
<p>Number of items: {formatNumber("fr-FR", 2, 4)} </p>
</>
);
}