Smart Background

An React Component Can Automatically Generate The Background
一个快速生成元素背景的 react 组件

Repository
github.com/yuanguandong/smart-background
Live demo
yuanguandong.github.io/smart-background/
Install
npm i smart-background -S

How to use
import React from 'react';
import Background from 'smart-background';
import { FaLaugh } from 'react-icons/fa';

export default () => {
return (

JUST DO IT



);
};

const styles = {
container: { width: '100%', position: 'relative', height: 350 },
content: {
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
},
icon: { color: '＃fff', fontSize: 120 },
text: { color: '＃fff', fontSize: 36, fontWeight: 'bold' },
};

Props

property
description
type
defaultValue
required

symbols
元素 /字符 /符号集合
(string | ReactNode | Element)[ ]
['●']
false

random
符号是否随机生成位置和大小
{ fontSizeRange: number[] } | undefined

false

underlayColor
底衬颜色
string

false

underlayImage
底衬图片
string

false

symbolsStyle
符号样式
Object
{color: '＃000', opacity: '0.3'}
false

rotate
符号旋转角度
number
0
false

symbolSize
符号大小
number
90
false

gap
符号间距
number
10
false

animation
滚动动画
{type: 'left' | 'right' | 'top' | 'bottom'; speed: number;}

false

exact
精确模式
boolean
false
false

childrenWrapClassName
子组件容器类名
string

false

childrenWrapStyle
子组件容器类名
React.CSSProperties

false

感觉以后会用到的就先点个 star 收藏吧！感谢！

目前尚无回复

falseReactbackground符号