React-event-layer

Show a layer when a event is fired on a component

TODO

• special entry/exit effect

Installing

npm install react-event-layer

Visual Example

Live Demo

https://ggggino.github.io/react-event-layer/examples

Getting Started

import {
  WrapperLayers,
  Layer
} from 'react-event-layer';

class AppComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <WrapperLayers enterMode="push" >
          <Layer z={0} selector="h3" event="click">
            <div className="backgroundedRedBox">
              <h3>hoverable</h3>
            </div>
          </Layer>
          <Layer z={10} animation={'fromTop'} selector="img" event="mouseenter">
            <div className="nemoLayer">
              <h4>Hover on Nemo</h4>
              <img src="..." />
            </div>
          </Layer>
          <Layer z={20} animation={'fromRight'} selector="h3" event="click">
            <div className="overNemoLayer">
              <h3>Another layer click me</h3>
            </div>
          </Layer>
      </WrapperLayers>
      </div>
    );
  }
}

Configuration

WrapperLayers props

Name	Type	Default value	Description
enterMode	String	push	This props can have the values push or replace

Layer props

Name	Type	Default value	Description
z	Integer	0	Not required. If omitted this number is incremental.
selector	String	""	Not required. If omitted the selector will be the whole element. Example "div > img" or ".divClass"
event	String	""	Not required. This props suggest what event fires the animation to the next layer. If omitted, no event will be launched

Running the tests

npm run test

Built With

• Icon author
• React-Motion

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• David Ginanni - Initial work - GGGGino

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details