React Laser Beam
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' |
License MIT
Made By Chikara Chan
漫思
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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 解决办法