React Laser Beam

A loading progress for react to improve your site interactive and experience inspired by youtube and github.

Installation

To use it, you should install with npm.


$ npm install --save react-laser-beam

Demos

Basic Usage

Initial the LaserBeam with the show prop related to the state, the initial value must be false.


import {Component} from 'react';
import LaserBeam from 'react-laser-beam';

class App extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            showLaserBeam: false
        };
    }
    _handleClick() {
        this.setState({
            showLaserBeam: true
        });
        ajax({
            url: '/api',
            success: () => {
                this.setState({
                    showLaserBeam: false
                });
            }
        });
    }
    render() {
        const {showLaserBeam} = this.state;
        return (
            <div>
                <button onClick={this._handleClick.bind(this)}>Launcher<button/>
                <LaserBeam show={showLaserBeam} />
            </div>
        )
    }
}

Custom Usage

You are now allowed to set the several props to make a more colorful and individual LaserBeam.
For example, you can change the width, background, style of spread or addon options.
For more details, see the docs at the bottom of page.


import {Component} from 'react';
import LaserBeam from 'react-laser-beam';

class App extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            showLaserBeam: false
        };
    }
    _handleClick() {
        this.setState({
            showLaserBeam: true
        });
        ajax({
            url: '/api',
            success: () => {
                this.setState({
                    showLaserBeam: false
                });
            }
        });
    }
    render() {
        const {showLaserBeam} = this.state;
        return (
            <div>
                <button onClick={this._handleClick.bind(this)}>Launcher<button/>
                <LaserBeam show={showLaserBeam} width="4px" background="#77b6ff" zIndex="2000" ccStyle="spread" addon="#fff" />
            </div>
        )
    }
}

Docs

Props

Prop	Type	Default	Required	Description
show	boolean	false	true	Control the laser-beam show or hide
width	string	'2px'		Set the height style of laser-beam
backgroud	string	'#77b6ff'		Set the background style of laser-beam
zIndex	string	'1200'		Set the z-index style of laser-beam
noShadow	boolean	false		Control the box-shadow style show or hide
ccStyle	string	'dash'		Control the ui style of laser-beam, you can only set `'dash'` or `'spread'`
addon	string	'transparent'		Set the end color of laser-beam, for example, try to set '#fff'