web3-ui

A react library developed with dumi

Usage

$3

``shell
npm i web3-ui-react
`

$3

#### InputNumber

InputNumber provides a lightweight and flexible number input solution, supporting both:

🪝 Hook API — useInputNumber (UI-agnostic)

🧱 Component API — (built on top of antd’s )

✨ Features

✅ Thousand separators formatting

✅ Cursor position auto recovery

✅ Built-in min, max, required, and custom validators

✅ Automatic error callback

✅ Supports decimal precision (precision)

✅ Works both as a hook and as a ready-to-use component

📦 Usage — Hook

`tsx
import { Button, Space } from 'antd';
import React, { useMemo, useState } from 'react';
import {
InputNumber,
InputNumberValidatorError,
isNaN,
toFixed,
useInputNumber,
} from 'web3-ui-react';

export default () => {
const [inputValidErr, setInputValidErr] =
useState();
const { inputProps, value, setValue } = useInputNumber({
min: 0,
precision: 18,
required: true,
onInputErr: (e) => setInputValidErr(e),
});
const isNaNErr = useMemo(
() => (isNaN(value) ? new Error('Invalid number type') : undefined),
[value],
);
const err = useMemo(
() => inputValidErr || isNaNErr,
[inputValidErr, isNaNErr],
);
return (



);
};
`

📦 Usage — Antd Component

`tsx
import { Button, Space } from 'antd';
import React, { useMemo, useState } from 'react';
import {
InputNumber,
InputNumberValidatorError,
isNaN,
toFixed,
} from 'web3-ui-react';

export default () => {
const [value, setValue] = useState('');
const [inputValidErr, setInputValidErr] =
useState();
const isNaNErr = useMemo(
() => (isNaN(value) ? new Error('Invalid number type') : undefined),
[value],
);
const err = useMemo(
() => inputValidErr || isNaNErr,
[inputValidErr, isNaNErr],
);
return (



);
};
`

Props

| Prop | Type | Description |
| ---------------- | ------------------------------------------- | -------------------------------------- |
| All InputProps | from antd | Inherits all standard antd Input props |
| min | number \| string | Minimum value |
| max | number \| string | Maximum value |
| required | boolean | Whether the field is required |
| precision | number | Decimal precision |
| format | boolean | Thousand separators formatting |
| validator | InputNumberValidator | Custom validation function set |
| onInputErr | (error?: InputNumberValidatorError) => void | Triggered when validation fails |

🧪 validator — Custom Validation

validator lets you define custom error messages or validation rules in addition to the built-in min / max / required.
💡 If validator is provided and the rule returns a string, that string will be wrapped in an InputNumberValidatorError and passed to onInputErr.

`tsx
export interface InputNumberValidator {
min?: (min: number, value: string) => string;
max?: (max: number, value: string) => string;
required?: () => string;
validate?: (value: string) => string | undefined | void;
}
`

Example: Custom Validator

`tsx
import React from 'react';
import { InputNumber, InputNumberValidatorError } from 'web3-ui-react';

export default () => (
min={0}
max={1000}
validator={{
min: (min: number, value: string) => Value must be ≥ ${min}, but got ${value},
max: (max: number, value: string) => Value must be ≤ ${max}, but got ${value},
required: () => '⚠️ This field is required!',
validate: (value: string) => {
if (Number(value) % 2 !== 0) {
return 'Value must be an even number';
}
},
}}
required
onInputErr={(err?: InputNumberValidatorError) => {
if (err) {
console.log([${err.type}] ${err.message});
}
}}
/>
);
`

✅ In the example above:

min and max will override the default error message.

validate func checks if the value is even.

All errors are reported through onInputErr.

🧭 Notes

✅ InputNumber behaves like a normal antd component, so it supports Form.Item, value, onChange, etc.

✅ onInputErr provides additional validation feedback independent from Form rules.

✅ useInputNumber returns setValue for programmatic updates.

✅ Changes to precision/format (and other parse-related props) may reformat the current value and can trigger onChange.

🚀 If you need to integrate with a different UI library, please use useInputNumber directly.

#### InputAddress

InputAddress provides a flexible address input solution for Ethereum and Tron, supporting both:

🪝 Hook API — useInputAddress (UI-agnostic)

🧱 Component API — (built on top of antd’s )

✨ Features

✅ ETH hex + checksum formatting (EIP-55)

✅ TRON Base58Check formatting (from hex, including 0x-prefixed hex, when enabled)

✅ Built-in required/type/custom validators

✅ Automatic error callback

✅ Works both as a hook and as a ready-to-use component

📦 Usage — Hook

`tsx
import { Button, Space } from 'antd';
import React, { useMemo, useState } from 'react';
import {
InputAddress,
InputAddressValidatorError,
useInputAddress,
} from 'web3-ui-react';

export default () => {
const [inputValidErr, setInputValidErr] =
useState();
const { inputProps, value, setValue } = useInputAddress({
type: 'eth',
format: true,
required: true,
onInputErr: (e) => setInputValidErr(e),
});
const err = useMemo(() => inputValidErr, [inputValidErr]);
return (



);
};
`

📦 Usage — Antd Component

`tsx
import { Button, Space } from 'antd';
import React, { useMemo, useState } from 'react';
import { InputAddress, InputAddressValidatorError } from 'web3-ui-react';

export default () => {
const [value, setValue] = useState('');
const [inputValidErr, setInputValidErr] =
useState();
const err = useMemo(() => inputValidErr, [inputValidErr]);
return (



);
};
`

Props

| Prop | Type | Description |
| ---------------- | ------------------------------------------- | -------------------------------------- |
| All InputProps | from antd | Inherits all standard antd Input props |
| type | InputAddressType | Address type (eth or tron) |
| format | boolean | Whether to format address |
| required | boolean | Whether the field is required |
| validator | InputAddressValidator | Custom validation function set |
| onInputErr | (error?: InputAddressValidatorError) => void | Triggered when validation fails |

🧪 validator — Custom Validation

validator lets you define custom error messages or validation rules in addition to the built-in required/type.
💡 If validator is provided and the rule returns a string, that string will be wrapped in an InputAddressValidatorError and passed to onInputErr.

`tsx
export interface InputAddressValidator {
type?: () => string;
required?: () => string;
validate?: (value: string) => string | undefined | void;
}
`

Example: Custom Validator

`tsx
import React from 'react';
import { InputAddress, InputAddressValidatorError } from 'web3-ui-react';

export default () => (
type="eth"
validator={{
type: () => 'Invalid address type',
required: () => '⚠️ This field is required!',
validate: (value: string) => {
if (value && value.endsWith('0')) {
return 'Address cannot end with 0';
}
},
}}
required
onInputErr={(err?: InputAddressValidatorError) => {
if (err) {
console.log([${err.type}] ${err.message});
}
}}
/>
);
`

✅ In the example above:

type and required will override the default error message.

validate func checks a custom rule.

All errors are reported through onInputErr.

🧭 Notes

✅ ETH inputs allow 0x-prefixed or plain 40-hex strings; format will normalize to 0x and optional checksum.

✅ TRON inputs accept Base58Check and hex (must start with 41, optional 0x prefix); format will convert hex to Base58Check.

✅ useInputAddress returns setValue for programmatic updates.

✅ Changes to format/type may reformat the current value and can trigger onChange.

🚀 If you need to integrate with a different UI library, please use useInputAddress directly.

🧮 Utility Functions

Besides the useInputNumber hook and InputNumber component, this package also exports a few utility functions to help handle numeric input.

> isNaN(value: unknown): boolean

💡 This method is especially useful when validating input before parsing it to a number.

This helper function determines whether the given value is not a valid number string.
Unlike the native Number.isNaN, this function also works with strings and filters out invalid numeric formats.

`ts
import { isNaN } from 'web3-ui-react';

isNaN(null); // true
isNaN(undefined); // true
isNaN('abc_222'); // true (invalid number string)
isNaN('-000.2334'); // false
isNaN('000.222'); // false
isNaN('-22.333'); // false
isNaN(123); // false
isNaN(NaN); // true
`

| Input | Result | Explanation |
| -------------------- | ------- | --------------------------- |
| null / undefined | ✅ true | Treated as invalid number |
| Function | ✅ true | Not a number |
| 'abc_222' | ✅ true | Contains invalid characters |
| '-000.2334' | ❌ false | Valid numeric string |
| '000.222' | ❌ false | Valid numeric string |
| '-22.333' | ❌ false | Valid numeric string |
| 123 | ❌ false | Valid number |
| NaN | ✅ true | Native NaN |

> toFixed(value: string): string

💡 toFixed does not round decimals like Number.prototype.toFixed — it only normalizes the raw input string.

This utility cleans up the parsed value into a normalized number string, removing incomplete characters like trailing - or ..

`ts
import { toFixed } from 'web3-ui-react';

toFixed('-'); // ''
toFixed('123.'); // '123'
toFixed('00123.45'); // '123.45'
`

| Input | Output | Explanation |
| ------------ | ---------- | --------------------------------------- |
| '-' | '' | A lone minus sign is considered invalid |
| '123.' | '123' | Trailing dot removed |
| '00123.45' | '123.45' | Leading zeros removed |

✅ These helpers are designed to work consistently with the input formatting and validation logic of InputNumber.

Development

`bash


install dependencies

$ npm install

develop library by docs demo

$ npm start

build library source code

$ npm run build

build library source code in watch mode

$ npm run build:watch

build docs

$ npm run docs:build

Locally preview the production build.

$ npm run docs:preview

check your project for potential problems

$ npm run doctor
``