react-attach-handler

react-attach-handler

React attach event handlers to targets.

Installation

Download node at nodejs.org and install it, if you haven't already.

npm install react-attach-handler --save

Why?

This module provides a reactjs way to bind events to global targets. It uses native React lifecycle to bind and unbind events.

Props

• children, Element, default null.
• target, (required) String or Object, default ''.
• events, (required) Function or Object,
  • If events is an Object its accepts capture, passive debounce & debounceDelay as options.

Usage

example/src/app.jsx

import AttachHandler from '../../lib/AttachHandler';

class App extends Component {
    handleMouseMove = () => {
        console.log(`mousemove ${this.iamhere} Hello`);
    };

    iamhere = 'Something is here';

    render = () => {
        return (
            <section
                className="app">
                <AttachHandler
                    target="window"
                    events={{
                        resize: this.handleMouseMove,
                    }}
                    />
            </section>
        );
    }
}

Dependencies

• classnames: A simple utility for conditionally joining classNames together
• react-addons-shallow-compare: This package provides the React shallowCompare add-on.

Dev Dependencies

• autoprefixer: Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website
• babel: Turn ES6 code into readable vanilla ES5 with source maps
• babel-cli: Babel command line.
• babel-core: Babel compiler core.
• babel-eslint: Custom parser for ESLint
• babel-loader: babel module loader for webpack
• babel-plugin-react-transform: Babel plugin to instrument React components with custom transforms
• babel-plugin-transform-remove-strict-mode: remove "use strict" directive
• babel-preset-es2015: Babel preset for all es2015 plugins.
• babel-preset-react: Babel preset for all React plugins.
• babel-preset-stage-0: Babel preset for stage 0 plugins
• babel-preset-stage-1: Babel preset for stage 1 plugins
• babel-register: babel require hook
• babelify: Babel browserify transform
• bootstrap: The most popular front-end framework for developing responsive, mobile first projects on the web.
• browserify: browser-side require() the node way
• camelcase: Convert a dash/dot/underscore/space separated string to camelCase: foo-bar → fooBar
• core-js: Standard library
• css-loader: css loader module for webpack
• cssnano: A modular minifier, built on top of the PostCSS ecosystem.
• del: Delete files and folders
• eslint: An AST-based pattern checker for JavaScript.
• eslint-loader: eslint loader (for webpack)
• eslint-plugin-react: React specific linting rules for ESLint
• express: Fast, unopinionated, minimalist web framework
• extract-text-webpack-plugin: Extract text from bundle into a file.
• file-loader: file loader module for webpack
• gulp: The streaming build system
• gulp-autoprefixer: Prefix CSS
• gulp-babel: Use next generation JavaScript, today
• gulp-cli: Command line interface for gulp
• gulp-concat: Concatenates files
• gulp-connect: Gulp plugin to run a webserver (with LiveReload)
• gulp-eslint: A gulp plugin for processing files with ESLint
• gulp-filter: Filter files in a vinyl stream
• gulp-livereload: Gulp plugin for livereload.
• gulp-minify-css: Minify css with clean-css.
• gulp-postcss: PostCSS gulp plugin
• gulp-rename: Rename files
• gulp-replace: A string replace plugin for gulp
• gulp-sass: Gulp plugin for sass
• gulp-uglify: Minify files with UglifyJS.
• gulp-wrap: A gulp plugin to wrap the stream contents with a template.
• gulp-wrap-umd: Wrap files with an UMD wrapper
• history: Manage session history with JavaScript
• html-loader: html loader module for webpack
• html-webpack-plugin: Simplifies creation of HTML files to serve your webpack bundles
• http-proxy: HTTP proxying for the masses
• json-loader: json loader module for webpack
• less: Leaner CSS
• less-loader: less loader module for webpack
• node-sass: Wrapper around libsass
• opn: A better node-open. Opens stuff like websites, files, executables. Cross-platform.
• postcss-loader: PostCSS loader for webpack
• react: React is a JavaScript library for building user interfaces.
• react-dom: React package for working with the DOM.
• react-router: A complete routing library for React
• react-transform-hmr: A React Transform that enables hot reloading React classes using Hot Module Replacement API
• run-sequence: Run a series of dependent gulp tasks in order
• sass-loader: Sass loader for webpack
• style-loader: style loader module for webpack
• task-dir: Import gulp tasks from directory.
• vinyl-buffer: Convert streaming vinyl files to use buffers
• vinyl-source-stream: Use conventional text streams at the start of your gulp or vinyl pipelines
• webpack: Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jade, coffee, css, less, ... and your custom stuff.
• webpack-dev-middleware: Offers a dev middleware for webpack, which arguments a live bundle to a directory
• webpack-hot-middleware: Webpack hot reloading you can attach to your own server
• webpack-manifest-plugin: webpack plugin for generating asset manifests
• webpack-stream: Run webpack as a stream

License

MIT