# linkfunction

> Link input value into function

Latest version **0.0.13** (published 2019-03-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install linkfunction
pnpm add linkfunction
yarn add linkfunction
bun add linkfunction
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.13 |
| Published | 2019-03-15 |
| First published | 2019-03-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Riderman de Sousa Barbosa |
| Maintainers | ridermansb |

## Links

- npm: https://www.npmjs.com/package/linkfunction
- Repository: https://github.com/ridermansb/linkfunction
- Homepage: https://github.com/ridermansb/linkfunction#readme
- Issues: https://github.com/ridermansb/linkfunction/issues
- npm.io page: https://npm.io/package/linkfunction

## Dependencies (1)

- [dlv](https://npm.io/package/dlv.md) ^1.1.2

## Recent versions

- 0.0.13 (latest) — 2019-03-15
- 0.0.12 — 2019-03-15
- 0.0.11 — 2019-03-15

## README

# linkFunction

> Create an Event handler function that call a given function with input value.

-   **Tiny:** ~**230 bytes** of [ES3](https://unpkg.com/linkfunction) gzipped
-   **Familiar:** it's just a function that does what you would have done manually
-   **Standalone:** one function, no dependencies, works everywhere

* * *

## Table of Contents

-   [Installation](#installation)
-   [How It Works](#how-it-works)
-   [Usage](#usage)
-   [Why](#why)
-   [Contribute](#contribute)
-   [Credits](#credits)
-   [License](#license)

* * *

## Installation

```sh
npm install --save linkfunction
```

The [UMD](https://github.com/umdjs/umd) build is also available on [unpkg](https://unpkg.com/linkfunction/dist/linkfunction.umd.js):

```html
<script src="//unpkg.com/linkfunction/dist/linkfunction.umd.js"></script>
```

This exposes the `linkFunction()` function as a global.

* * *

## How It Works

It's important to understand what linkFunction does in order to use it comfortably.

**`linkFunction(fn, [valuePath])`**

- `fn`: the function that will called with value as parameter
- `valuePath`: _optional_ key/path into the event object at which to retrieve the new value

Check the javascript vanilla usage:

```js
const linkfunction = require('linkfunction')

const e = { // Will be your SyntheticEvent for input
    target: {
        nodeName: 'any',
        type: 'text',
        value: 'Riderman'
    }
}

const setName = name => console.log(name)  // Output Riderman

const handler = linkfunction(setName)

handler(e)
```

Here's two equivalent event handlers, one created manually and one created with linkFunction:

```js
handleInput = e => {
  myFn(e.target.value)
}

handleInput = linkFunction(myFn)
```

Notice how we didn't specify the event path - if omitted, `linkFunction()` will use the `checked` or `value` property of the event target, based on its type.

## Usage

Standard usage is a function that returns an event handler that call your given function witn input value.

```js
import linkFunction from 'linkfunction';

class Foo extends Component {
  setName(name) {
    const { obj } = this.props;
    obj.setName(name);
  }
  render({ obj }) {
    return (
      <input
        value={obj.name}
        onInput={linkFunction(this.setName)}
      />
    );
  }
}
```

## Why

The main reason is for supporting updates with [mobx-state-tree][mst] models.   
This lib will made easy update models with inputs

![example.png](example.png)

That example, will update any related component once input has changed.

* * *

## Contribute

First off, thanks for taking the time to contribute!
Now, take a moment to be sure your contributions make sense to everyone else.

### Reporting Issues

Found a problem? Want a new feature? First of all see if your issue or idea has [already been reported](../../issues).
If it hasn't, just open a [new clear and descriptive issue](../../issues/new).

### Submitting pull requests

Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.

> 💁 **Remember: size is the #1 priority.**
>
> Every byte counts! PR's can't be merged if they increase the output size much.

-   Fork it!
-   Clone your fork: `git clone https://github.com/<your-username>/linkfunction`
-   Navigate to the newly cloned directory: `cd linkfunction`
-   Create a new branch for the new feature: `git checkout -b my-new-feature`
-   Install the tools necessary for development: `npm install`
-   Make your changes.
-   `npm run build` to verify your change doesn't increase output size.
-   `npm test` to make sure your change doesn't break anything.
-   Commit your changes: `git commit -am 'Add some feature'`
-   Push to the branch: `git push origin my-new-feature`
-   Submit a pull request with full remarks documenting your changes.

## Credits

This project was created based on [linkstate][linkstate].

The main reason to created another one was the dependencies. linkFunction has no dependency of framework or lib, just function that call another function.

However, I would like to thanks [Jason Miller](https://jasonformat.com/) for the incredible project 

## License

[MIT License](LICENSE.md) © [Riderman de Sousa Barbosa](http://ridermansb.github.io/)

[linkstate]: https://github.com/developit/linkstate
[mst]: https://github.com/mobxjs/mobx-state-tree#identifiers

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