Skip to main content

Counter

The Counter control is intended for selecting numbers. It includes an input for entering a number and a couple of buttons which are used for increasing/decreasing the entered numeric value. You can set the value of the counter, as well as the minimal and maximal values and specify the step of changing the value.

Counter

Initialization​

To create a Counter instance on a page, you need to complete the following steps:

  • import the source file of the control on a page:
App.jsx
import { Counter } from "@svar-ui/react-core";
  • use the <Counter> component to initialize the control:
App.jsx
<Counter />

A default counter is initialized with the minimal value 0 with no label.

Setting the value​

On initialization a counter contains the minimal value 0. You can set a numeric value that will be rendered in the counter via the value API property.

<Counter value={10} />

Related sample: Counter

Getting the current value​

You can get the current value of the Counter control. For this, you need to:

  • declare a state variable that will contain the input's value (it may contain the initial value):
import { useState } from "react";
import { Counter } from "@svar-ui/react-core";

const App = () => {
  const [v1, setV1] = useState(5);

  return <Counter value={v1} onChange={(ev) => setV1(ev.value)} />;
};

After that the state variable will be updated on each change of the value in the counter via the onChange handler.

Related sample: Counter

Catching the change of the value​

In case you need to catch the change of the value in the counter, handle the change event via the React camel-case event prop onChange. The handler receives an object with the new value and an input flag:

function handleChange(ev) {
  const newValue = ev;
  console.log(newValue);
  // => { value: 2, input: true }
}

<Counter onChange={handleChange} />

The handler function receives an object that can contain:

  • value - current value of the control
  • input - (bool) set to true if a value is being typed in the input (which means it may not be the final value yet)

Specifying the max and min values​

You can specify the necessary maximal and minimal counter parameters via the max and min properties. The default minimal value is 0.

<Counter max={80} min={10} />

Related sample: Counter

Setting the step​

The step is the interval of increasing/decreasing the counter value by clicking the +/- buttons. You can adjust it with the help of the step property. The default value of the step is 1.

<Counter step={5} />

Related sample: Counter

Setting the read-only mode​

When you want a counter to be active but inaccessible for editing, make use of the readonly property. The config has the boolean value, false by default. You can either set it to the true value or just specify the property without a value:

<Counter readonly={true} />

or

<Counter readonly />

Related sample: Counter

Setting the disabled state​

Whenever you need to render a disabled counter, you can do it with the help of the disabled property set to true:

<Counter disabled={true} />

Disabled counter

It is also possible to set a counter to the disabled state by declaring the property without an explicit value:

<Counter disabled />

Related sample: Counter

Adding a label​

A default counter has no label. To provide a label for the Counter control, you can use the Field component and complete several steps:

  • include the Field source file on a page, declare the <Field> component and add the necessary props:
    • add a desired label via the label property
    • optionally, set the position="left" property to place the label to the left of the input field
    • the Field component provides an id to its children through a render prop; use that id to bind the field and counter controls
import { Counter, Field } from "@svar-ui/react-core";

<Field label="Counter label" position="left">
  {({ id }) => <Counter id={id} />}
</Field>

Then wrap the Counter in question in the <Field> tags and pass the id property for the Counter control to link the controls.

Related sample: Counter

Styling a validation error​

When you use a counter inside a form and a wrong value is passed to the control, you can use error styling to show that validation has failed. Once you've set the error property to true (or just specified the property without a value):

<Counter error={true} />

the counter's border and the value become red.

Counter error style

To make the label red as well, use the error property of the Field control.

import { Counter, Field } from "@svar-ui/react-core";

<Field label="Error" error>
  {({ id }) => <Counter error id={id} />}
</Field>

Related sample: Counter