# react-spread

> Spread props to children components

Latest version **1.1.4** (published 2022-01-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-spread
pnpm add react-spread
yarn add react-spread
bun add react-spread
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.4 |
| Published | 2022-01-13 |
| First published | 2021-12-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 37.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Rafael Salguero |
| Maintainers | rafaelsalguero |

## Links

- npm: https://www.npmjs.com/package/react-spread
- npm.io page: https://npm.io/package/react-spread

## Dependencies (1)

- [react](https://npm.io/package/react.md) >=16

## Recent versions

- 1.1.4 (latest) — 2022-01-13
- 1.1.3 — 2022-01-01
- 1.1.2 — 2021-12-31
- 1.1.1 — 2021-12-31
- 1.1.0 — 2021-12-30
- 1.0.4 — 2021-12-20
- 1.0.3 — 2021-12-20
- 1.0.2 — 2021-12-20
- 1.0.1 — 2021-12-20
- 1.0.0 — 2021-12-20

## README

# react-spread

The *tiniest* package to do forms in React.

- ✅ Works with React 16 and 17 both DOM and Native
- ✅ Perfectly typed
- ✅ Packaged both for ES6 + CommonJS 
- ✅ Functional, controlled style
- ✅ Composable
- ✅ Unopinionated, works with any component out of the box
- ✅ Super easy to implement your own validation logic
- ✅ No-nonsense, tiny API, super simple logic

# Minimal example

```tsx
import { useSpread } from "react-spread"

interface Customer {
    name: string;
    age: number;
}

interface Props {
    value: Customer;
    onChange: (x: Customer) => void;
}

function CustomerForm(props: Props)
{
    // Calling 'bind' with a field name
    // returns a props object for that specific field

    const bind = useSpread(props);
    return (
        <div>
            <Input {...bind("name")} >
            <Input {...bind("age")} type="number" >
        </div>
    );
}
```

# Form validation
Validation is not included but it's easy to implement your own custom logic
by spreading an object of errors over form fields:

```tsx
function validate(x: Customer) {
    return {
        name: !x.name ? "Required" : null,
        age: x.age < 18 ? "Must be over 18": null
    }
}


function CustomerForm(props: Props)
{
    // An 'error' prop will be passed to each specific field
    // with the corresponding value
    const bind = useSpread({
        ... props,
        error: validate(props.value)
    })

    return (
        <div>
            <Input {...bind("name")} >
            <Input {...bind("age")} type="number" >
        </div>
    );
}
```

# Extra props
```tsx
function CustomerForm(props: Props)
{
    // Second parameter is the optional "extra" props
    // A 'readonly' prop will be passed to each component
    const bind = useSpread(props, {
        readOnly: true
    })

    return (
        <div>
            <Input {...bind("name")} >
            <Input {...bind("age")} type="number" >
        </div>
    );
}
```

# Function props
Function props are treated different from non-function ones, when a child component
calls, the call is mirrored with the field name as an extra first argument.

In other words, functions are mapped to:
```js
(...args) => prop(field, ...args)
```

This allows the function handler to known which field made the call

# onChange prop

`onChange` is the only prop that behaves differently, is mapped to

```js
(x) => prop({... value, [field]: x })
```


# No bloat oath

> I do solemnly swear to never bloat this package
>
> <cite>Rafael Salguero</cite>

---
_Source: https://npm.io/package/react-spread · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._