@culur/antd-number-picker

Ant design number picker.

Install

Add @culur/antd-number-picker dependency to your project.

# Using npm
npm install @culur/antd-number-picker

# Using yarn
yarn add @culur/antd-number-picker

Usage

Standalone

function Example() {
  const [value, setValue] = setState(0);

  return (
    <AntdNumberPicker
      min={0}
      max={10}
      value={value}
      onChange={(value_) => setValue(value_)}
    />
  );
}

Antd form

function Example() {
  type FormValues = { number: number };
  const [form] = Form.useForm<FormValues>();

  const onFinish = (values: FormValues) => {
    console.log(`form values: ${values.number}`);
  };

  return (
    <Form
      layout="inline"
      form={form}
      onFinish={onFinish}
      initialValues={{
        number: 3,
      }}
    >
      <Form.Item name="number">
        <AntdNumberPicker min={0} max={10} />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
}

Props

Property	Description	Type	Default	Required
className	InputNumber className	string	-	-
min	The min value	number	-	true
max	The max value	number	-	true
readOnly	If readonly the input	boolean	false	-
placement	The position of the tooltip relative to the target, which can be one of top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom	string	bottomLeft	-
trigger	Tooltip trigger mode. Could be multiple by passing an array	hover | focus | click | contextMenu | string[]	click	-
cols	Number of cols in popover	number	7	-
rows	Number of rows in popover	number	7	-
value	The current value	number	-	-
onChange	The callback triggered when the value is changed	function(value: number | string | null)	-	-

License

@culur/antd-number-picker is released under the GNU GPLv3 license.