react-cached-handler

react-cached-handler is a tiny library that passes parameters to your event handlers using arrow functions without impacting rendering performance of components

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

Download

Package Installation

$ npm install react-cached-handler

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 specified
event : The second parameter is the original event. So you can access the value by event.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

import createHandler from 'react-cached-handler';

class EditPost extends React.PureComponent {

    handler = createHandler((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-cached-handler';

class PostMenu extends React.PureComponent {

    postSelectHandler = createHandler();
    tagSelectHandler = createHandler();

    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, post.Title, post.Author, this.handlePostClick)}
/>

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, post.Title, post.Author, this.handlePostClick)}
/>

Example 5

It's ok if you don't assign the key. It uses 'default' for the key

firstNameChangeHandler = createHandler();

.
.

<TextField onChange={this.firstNameChangeHandler(e => {
        console.log(e.target.value);
    })}
/>

firstNameChangeHandler = createHandler(e => {
    console.log(e.target.value);
});

.
.

<TextField onChange={this.firstNameChangeHandler()}
/>

ghominejad / react-cached-handler Goto Github PK