# @react-formless/utils

> set of very useful ts utils (including Elm style validators)

Latest version **1.13.1** (published 2020-11-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @react-formless/utils
pnpm add @react-formless/utils
yarn add @react-formless/utils
bun add @react-formless/utils
```

## Health

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

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.13.1 |
| Published | 2020-11-03 |
| First published | 2020-02-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 292.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | Grzegorz Moskal |
| Maintainers | gmoskal |
| Keywords | utils, typescript, react, elm |

## Links

- npm: https://www.npmjs.com/package/@react-formless/utils
- Repository: https://github.com/gmoskal/formless
- Homepage: https://github.com/gmoskal/formless#readme
- Issues: https://github.com/gmoskal/formless/issues
- npm.io page: https://npm.io/package/@react-formless/utils

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.13.1 (latest) — 2020-11-03
- 1.13.0 — 2020-09-10
- 1.12.3 — 2020-08-28
- 1.12.2 — 2020-08-28
- 1.11.0 — 2020-08-26
- 1.10.3 — 2020-08-24
- 1.10.1 — 2020-07-30
- 1.10.0 — 2020-07-24
- 1.9.4 — 2020-07-08
- 1.9.1 — 2020-05-08
- 1.9.0 — 2020-05-07
- 1.8.5 — 2020-04-28
- 1.8.2 — 2020-03-30
- 1.4.0 — 2020-02-27
- 1.3.7 — 2020-02-13
- … 11 more at https://npm.io/package/@react-formless/utils/versions

## README

# @react-formless/utils

> typescript/react utils

![tests status](https://github.com/gmoskal/react-formless/workflows/CI/badge.svg)

The set of functions that I found very useful for writing an application using react and typescript

## extend()

### Signature

### Description

It takes any object and returns function that takes any part of that object and returns this object and part combained.
Tip: _When used together with `react.useState` it gives certainty that the reduction step was done in a proper way._

### Example

```typescript
import { extend } from "@react-formless/utils"

type T = { foo: number, bar: number}
type ReduceFn = (state: T) => T

// there is no warning here
const reduce: ReduceFn = state => ({ ...state, bra: 1 })

// this one gives error: Argument of type '{ bra: number; }' 
// is not assignable to parameter of type 'Partial<T>'.
const reduce: ReduceFn = state => extend(state)({bra: 1})
```

Consider a `react world` example

```typescript
import * as React from "react"

export const Comp = () => {
    const [state, setState] = React.useState({ foo: 1, bar: 2 })
    return (
        <>
            <h1>foo {state.foo}</h1>
            <button onClick={_ => setState({ ...state, foo: state.foo + 1 })}>+</button>
            <button onClick={_ => setState(s => ({ ...s, foo: 0 }))}>reset</button>
            <h1>bar {state.bar}</h1>
            <button onClick={_ => setState(s => ({ ...s, bar: s.bar + 1 }))}>+</button>
            <button onClick={_ => setState(s => ({ ...s, bra: 0 }))}>reset</button>
        </>
    )
}
```

Same component with `extend()` use

```typescript
import * as React from "react"
import { extend } from "@react-formless/utils"

export const Comp2 = () => {
    const [state, setState] = React.useState({ foo: 1, bar: 2 })
    return (
        <>
            <h1>foo {state.foo}</h1>
            <button onClick={_ => setState(s => extend(s)({ foo: s.foo + 1 }))}>+</button>
            <button onClick={_ => setState(s => extend(s)({ foo: 0 }))}>reset</button>
            <h1>bar {state.bar}</h1>
            <button onClick={_ => setState(s => extend(s)({ bar: s.bar + 1 }))}>+</button>
            <button onClick={_ => setState(s => extend(s)({ bra: 0 }))}>reset</button>
        </>
    )
}
```

[Check it out your self](https://stackblitz.com/edit/react-ts-n3sg2e?embed=1&file=index.tsx&hideExplorer=1)

## omitObject()

```typescript
type omitObjectFunction = <T, K extends keyof T>(source: T, keysToOmit: K[]) => Omit<T, K>
```

It takes any object and any array of keys of that object and return object with all given keys omited.

## keys()

```typescript
type keysFunction = <T>(source: T) => Array<keyof T>
```

typed `Object.keys`

## TODO

describe everything else

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