Linkfunction NPM

linkFunction

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

Tiny: ~230 bytes of ES3 gzipped
Familiar: it's just a function that does what you would have done manually
Standalone: one function, no dependencies, works everywhere

Installation

npm install --save linkfunction

The UMD build is also available on unpkg:

<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:

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:

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.

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 models.
This lib will made easy update models with inputs

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. If it hasn't, just open a new clear and descriptive issue.

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.

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 for the incredible project