Package Exports

@jswork/react-isolate-event-container

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@jswork/react-isolate-event-container) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-isolate-event-container

A container that prevents certain events from propagating outside of the container.

installation

npm install -S @jswork/react-isolate-event-container

properties

Name	Type	Required	Default	Description
className	string	false	-	The extended className for component.
items	array	false	[]	React events list.

usage

import css

@import "~@jswork/react-isolate-event-container/dist/style.css";

// or use sass
@import "~@jswork/react-isolate-event-container/dist/style.scss";

// customize your styles:
$react-isolate-event-container-options: ()

import js

import ReactDemokit from '@jswork/react-demokit';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactIsolateEventContainer from '@jswork/react-isolate-event-container';
import './assets/style.scss';

class App extends React.Component {
  handleClick = (e) => {
    console.log('inner click1');
  };

  handleOutterClick = (e) => {
    console.log('outter click2');
  };

  handleCntClick = (e) => {
    console.log('container click3');
  };

  render() {
    return (
      <ReactDemokit
        className="p-3 app-container"
        url="https://github.com/afeiship/react-isolate-event-container">
        <div className="isolated" onClick={this.handleOutterClick}>
          <ReactIsolateEventContainer items={['onClick']}>
            <button className="button is-primary" onClick={this.handleClick}>
              I am isolated
            </button>
          </ReactIsolateEventContainer>
        </div>

        <div className="no-isolated" onClick={this.handleOutterClick}>
          <button className="button is-info" onClick={this.handleClick}>
            I am not isolated
          </button>
        </div>
      </ReactDemokit>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

documentation

https://afeiship.github.io/react-isolate-event-container/

license

Code released under the MIT license.