react-easypopin v1.0.3

react easypopin

Get the AMD module located at react-easypopin.js and include it in your project.

Installation

 npm install --save-dev react-easypopin

Usage

• Import the plugin
• Instantiate it in the template
• Define its properties

// importation
import ReactEasypopin from 'react-easypopin';

// usage in template
<ReactEasypopin {...props}>
    // CONTENT
</ReactEasypopin>

Defining Properties :

Animation

The popin can be opened and closed with classy CSS3 animations. Those are available using following constants :

• EFFECT_APPEAR_FROM_LEFT_TO_RIGHT
• EFFECT_APPEAR_FROM_RIGHT_TO_LEFT
• EFFECT_APPEAR_FROM_TOP_TO_BOTTOM
• EFFECT_APPEAR_FROM_BOTTOM_TO_TOP
• EFFECT_APPEAR_BY_HORIZONTAL_3D
• EFFECT_APPEAR_DEFAULT

You can also define your own CSS class string and animation instead of using pre-configured constants.

Example of usage :

import React, { Component } from 'react';
import ReactEasypopin, { EFFECT_APPEAR_FROM_BOTTOM_TO_TOP } from 'react-easypopin';

export default class Example extends Component {
    render () {
        <div className="Example">
            <ReactEasypopin
                animation={EFFECT_APPEAR_FROM_BOTTOM_TO_TOP}
                ref="popin"
            />
        </div>
    }
}

trigger open & close

You can trigger an action to open the popin by calling following methods using REFS :

• open()
• close()

Here is a sample integration (ES6) :

import React, { Component } from 'react';
import ReactEasypopin from 'react-easypopin';

export default class widget extends Component {
    openPopin () {
        this.refs.popin.open();
    }
    render = () => (
        <div id="widget-container">
            <button onClick={this.openPopin}>Open</button>
            <ReactEasypopin ref='popin'>
                <div id="content">
                    <p>this is the content of my popin :)</p>
                </div>
            </ReactEasypopin>
        </div>
    );
}

Contribution on the code ?

• Fork the project and create a new branch
• Run the server : npm start.
• Continuously run tests on file changes npm run watch-test;
• Run tests: npm test;
• Build npm run build;

Please note that tests are automatically run on pre-push. Push isn't possible if tests are wrong !!