# @zwzn/spicy

> Spicy is a simple helper library for React and Preact.

Latest version **1.0.1** (published 2020-04-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install @zwzn/spicy
pnpm add @zwzn/spicy
yarn add @zwzn/spicy
bun add @zwzn/spicy
```

## 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.0.1 |
| Published | 2020-04-10 |
| First published | 2020-04-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | zwzn |

## Links

- npm: https://www.npmjs.com/package/@zwzn/spicy
- npm.io page: https://npm.io/package/@zwzn/spicy

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^16.13.0

## Recent versions

- 1.0.1 (latest) — 2020-04-10
- 1.0.0 — 2020-04-10

## README

# Spicy

Spicy is a simple helper library for React and Preact.

## `bindValue()`

`bindValue` adds the value to the beginning of an event handler function.

```tsx
import { bindValue } from '@zwzn/spicy'

const click = (value: string, event: Event) => {
    // do something with value
})

<input onClick={bindValue(click)} >
```

If you call it twice with the same function it will return the same reference,
you don't need to worry about saving the result.

```tsx
import { bindValue } from '@zwzn/spicy'

const click = (value: string, event: Event) => {})

bindValue(click) === bindValue(click)
```

## `bind()`

`bind` lets you add arbitrary arguments to the beginning of a function and will
return the same instance of a function if called with the same arguments.

```ts
import { bind } from '@zwzn/spicy'

const foo = (a: string, b: number) => a + ' ' + b

const bar1 = bind('baz', foo)
// bar1 = (b: number) => 'baz' + ' ' + b

const bar2 = bind('baz', foo)
// bar1 and bar2 are the same instance of a function

bar1 === bar2
```

### In Loops

`bind` is useful for adding callbacks to lists.

```tsx
import { bind } from '@zwzn/spicy'

function onClick(item: string) {
    alert(item)
}

/**
 * Foo renders a list of strings and will alert with the text of the item when
 * it is clicked
 */
function Foo(props: { list: string }) {
    return <ul>
        {props.list.map(item => (
            <li onClick={bind(item, onClick)}>{item}</li>
        ))}
    </ul>
}
```

### Objects

You can use objects as arguments to pass into function but if you are not carful
you can end up making a new function every render. It will only return the same
instance of a function if all of the arguments return true when compared with
`Object.is`.

```ts
import { bind } from '@zwzn/spicy'

const merge = (a: object, b: object) => { ...a, ...b }

bind({}, merge) !== bind({}, merge)
// since the 2 objects do not have the same reference the will make different
// function

const foo = {}
bind(foo, merge) === bind(foo, merge)
// these function are the same because they both use the same instance of the
// object
```

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