@clds/number-field-old NPM

@clds/number-field-old

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-old';

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>
    </>
  );
};