react-fast-handler
v1.0.2
Published
A tiny library that sends parameters to the actual handler function without impacting rendering performance
Downloads
5
Maintainers
Readme
react-fast-handler
react-fast-handler
is a tiny library that passes parameters to your handler functions without impacting rendering performance
Features
- Named handlers
- Handle events by arrow functions
- Access to the key, custom arguments and the original event
- Component rendering performace
- Custom context for handlers
How to use it?
You define a handler by calling createHandler
. The first parameter is the context of your handler function that is optional
handler = createHandler(this)`
Now you can set your arrow function in events. The first argument must be a key.
<TextField
label="Title"
onBlur={this.handler('title', (fieldName, event)=> {} )}
defaultValue = "default value" />
Parameters of the arrow function :
fieldName
: The first parameter of the arrow function is allways the key you have specifiedevent
: The second parameter is the original event. So you can access the value byevent.target.value
You can pass even more arguments but the event
argument is always the last one :
onBlur={this.handler('title', 'a1', 'a2', (fieldName, p1, p2, event)=> { console.log(p1) } )}
Note : Internally it caches your arrow functions by the specified key, no need to be worried about rerendering!
Example 1
EditPost
Component that handles named events via a default handler function
class EditPost extends React.PureComponent {
handler = createHandler(this, (fieldName, e) => { console.log(e.target.value) } );
render() {
return <div>
<TextField
label="Title"
onBlur={this.handler('title')}
defaultValue = "default value" />
<TextField
label="Author Name"
onBlur={this.handler('authorName')}
defaultValue = "default value" />
<TextField
label="Post Content"
onBlur={this.handler('postContent')}
defaultValue = "default value" />
<TextField
label="Post Content"
onBlur={this.handler('postContent' )}
defaultValue = "default value" />
</div>
}
}
- You could also override the default handler function
<TextField
label="Post Content"
onBlur={this.handler('postContent', (fieldName, e) => { console.log('from custom handler function')} )}
defaultValue = "default value" />
Example 2
PostMenu
Component that handles selecting tags and posts
import React from 'react';
import createHandler from 'react-fast-handler';
class PostMenu extends React.PureComponent {
postSelectHandler = createHandler(this);
tagSelectHandler = createHandler(this);
render() {
return <div>
{
this.props.posts.map(post =>
<Post key={post.id}
onClick={this.postSelectHandler(post.id, (postId) => { console.log(postId) })}
/>)
}
{
this.props.tags.map(tag =>
<Tag key={tag}
onClick={this.tagSelectHandler(tag, (tag) => { console.log(tag) })}
/>)
}
</div>
}
}
Example 3
You can also pass more objects as arguments
handlePostClick = (postId, title, author) => {
console.log(author.name)
}
.
.
<Post key={post.id}
onClick={this.handler(post.id, this.handlePostClick, post.Title, post.Author)}
/>
Example 4
The original event object is passed as last argument
handlePostClick = (postId, title, author, e) => {
console.log(e.target)
}
.
.
<Post key={post.id}
onClick={this.handler(post.id, this.handlePostClick, post.Title, post.Author)}
/>