Skip to content

Commit

Permalink
docs: improve useNumberFieldProps
Browse files Browse the repository at this point in the history
  • Loading branch information
MiroslavPetrik committed Dec 5, 2023
1 parent cab196d commit b976705
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 25 deletions.
3 changes: 2 additions & 1 deletion src/Intro.contents.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@
| | |
| ---------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| [useClearInputAction](?path=/docs/hooks-useclearinputaction--docs) | Hook providing action to clear input value via its ref. |
| [useCheckboxFieldProps](?path=/docs/hooks-usecheckboxfieldprops--docs) | Controls fields having `boolean` values |
| [useCheckboxFieldProps](?path=/docs/hooks-usecheckboxfieldprops--docs) | Adapts fields having `boolean` values to controlled checkbox inputs. |
| [useNumberFieldProps](?path=/docs/hooks-usenumberfieldprops--docs) | Adapts fields having `number` values to controlled numeric inputs. |
| [useOptions](?path=/docs/hooks-useoptions--docs) | A data hook to evaluate which of option(s) is(are) active with respect to a field. |
| [useRequiredProps](?path=/docs/hooks-userequiredprops--docs) | Provides the `required` prop for input based on field optionality. |
| [useSelectFieldProps](?path=/docs/hooks-useselectfieldprops--docs) | A generic hook to manage a field holding active option from primitive options. |
Expand Down
26 changes: 2 additions & 24 deletions src/fields/number-field/Docs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,32 +18,10 @@ const heightCentimeters = numberField({
const tipAmount = numberField().optional();
```

Usable with [useNumberFieldProps()](?path=/docs/hooks-useNumberFieldProps--docs)

## Initial Config

<Markdown>{Config}</Markdown>

## useNumberFieldProps(numberField)

A hook providing props to control a number input.

```tsx
const NumberInput = ({
field,
label,
}: {
field: NumberFieldAtom;
label: ReactNode;
}) => {
const props = useNumberFieldProps(field);

return (
<div style={{ margin: "20px 0" }}>
<FieldLabel field={field} label={label} />
<input type="number" {...props} />
<FieldErrors field={field} />
</div>
);
};
```

<Stories />
45 changes: 45 additions & 0 deletions src/hooks/use-number-field-props/Docs.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { Meta } from "@storybook/blocks";

<Meta title="hooks/useNumberFieldProps" />

# `useNumberFieldProps(field: NumberField)`

A hook to control the numeric inputs e.g. `input[type=number]`, `input[type=range]`.

```ts
import { useNumberFieldProps } from "@form-atoms/field";
```

Works with

- [numberField()](?path=/docs/fields-numberField--docs)
- [digitField()](?path=/docs/fields-digitfield--docs)

### Features

-**Reads the `event.valueAsNumber` value** from the event handler.
- ✅ Normalizes the the empty `NaN` value.

### Example Usage

```tsx
import { NumberField, useNumberFieldProps } from "@form-atoms/field";

const NumberInput = ({
field,
label,
}: {
field: NumberField;
label: ReactNode;
}) => {
const props = useNumberFieldProps(field);

return (
<div style={{ margin: "20px 0" }}>
<FieldLabel field={field} label={label} />
<input type="number" {...props} />
<FieldErrors field={field} />
</div>
);
};
```

0 comments on commit b976705

Please sign in to comment.