flyerHReact-Canvas-Nest
English | 简体中文
React component for a nest backgroud.
Creativity is inspired by canvas-nest.js
Install
# use yarn
yarn add react-canvas-nest
# or use npm
npm install react-canvas-nestUsage
Note:
- You can refer to this example.
- Component size depends on parent node size.
Import Component
import ReactCanvasNest from 'react-canvas-nest';Use Component
- Default
<ReactCanvasNest /> - Custom
<ReactCanvasNest className = 'canvasNest' config = {{ pointColor: ' 255, 255, 255 ' }} style = {{ zIndex: 99 }} />
API
className
Support className attributeconfig
| Property | Description | Default |
|---|---|---|
| count | count of points | 88 |
| pointR | radius of the point | 1 |
| pointColor | | 114, 114, 114 | |
| pointOpacity | transparency of points | 1 |
| dist | maximum distance between two point | 6000 |
| lineColor | | 0, 0, 0 | |
| lineWidth | multiple of line width | 1 |
| follow | mouse follow | true |
| mouseDist | distance between point and mouse | 20000 |
style
Support style attribute, default style as follows:| Property | Default |
|---|---|
| zIndex | -1 |
| opacity | 1 |
| display | block |
| position | absolute |
Related projects
- canvas-nest.js: project use by native javascript.
- vue-canvas-nest: vue component wrapper.
- canvas-nest-for-wp: a wordpress plugin, search
canvas-nestin wordpress store.
License
React-Canvas-Nest is MIT licensed.