React Laser Beam

React Laser Beam

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

 Source  Demos  Docs

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'

License MIT

Made By Chikara Chan

posted on   漫思  阅读(33)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
历史上的今天:
2019-03-14 数组的一些运算操作
2019-03-14 underscore用法大全
2017-03-14 EXT3.3.1在IE9 IE10click事件 失效怎么解决
2017-03-14 npm 无法安装 ionic 解决办法

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示