@clds/number-field NPM

@clds/number-field

Documentation of the number field component.

Installation

Install the package using Yarn:

yarn add @cld/number-field

Props

Most props are identical to @clds/text-field

Components

NumberField

Controlled/Uncontrolled number field component

Adds custom up/down buttons to control the value from the UI

Usage

import React, { FC, useRef, useState } from 'react';

import TextField from '@clds/text-field';

export const ControlledUsage = () => {
  const [value, setValue] = useState(0);

  return (
    <NumberField
      placeholder="Enter number here"
      value={value}
      onChange={setValue}
    />
  );
};

export const UncontrolledUsage = () => {
  const inputRef = useRef < HTMLInputElement > null;

  const handleButtonClick = () => alert(inputRef.current?.value);

  return (
    <>
      <NumberField inputRef={inputRef} />

      <br />
      <button onClick={handleButtonClick}>Alert current field value</button>
    </>
  );
};