README.md

linkFunction

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

• Small. ~300 bytes (minified and gzipped) of ES3. No dependencies. Size Limit controls the size.
• 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
• How It Works
• Usage
• Why
• Contribute
• Credits
• License

---

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);

https://runkit.com/ridermansb/linkfunction

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

import linkFunction from "linkfunction";

const InputName = observer(({ personModel }) => (
  <input type="text" value={linkFunction(personModel.setName)} />
));

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

License

MIT License © Riderman de Sousa Barbosa