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
npm install --save linkfunctionThe 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.
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 parametervaluePath: 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.
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)} />;
}
}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.
First off, thanks for taking the time to contribute! Now, take a moment to be sure your contributions make sense to everyone else.
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.
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 buildto verify your change doesn't increase output size.npm testto 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.
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
MIT License © Riderman de Sousa Barbosa
