一个快速生成元素背景的 React 组件

在开发过程中，我们经常会遇到使用背景的地方，比如登录页面，用户信息页面，封面图…… 寻找契合业务主题的背景十分耗费精力，总觉得做的背景不合适，如果直接用图片呢，逻辑是比较简单，但寻找到一张契合业务主题的图片也不是那么容易，所以想到用符号生成幕布一样的背景。

从这个出发点有了这个组件，滚动的图片墙可能这个需求比较常见，用 SmartBackground 可以很快速的实现。

安装完，以下是使用案例介绍

npm i smart-background -S

默认以圆点作为符号

import React from 'react';
import Background from 'smart-background';
import { FaLaugh } from 'react-icons/fa';
export default () => {return (<div style={styles.container}><Background underlayColor="#f00" animation={{ type: 'bottom', speed: 5 }}><div style={styles.content}><FaLaugh style={styles.icon} /><h1 style={styles.text}>JUST DO IT</h1></div></Background></div>);
};
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' },
};

Animation 动画

支持四个方向的滚动循环动画，可以控制速度 GPU rendering, Does not occupy the js process GPU 渲染, 动画不占用javascript线程

import React from 'react';
import Background from 'smart-background';
const symbols = ['乾','坤','震','巽','坎','离','艮','兑','天','地','雷','风','水','火','山','泽']
export default () => {return (<div className="container"><BackgroundunderlayImage='linear-gradient(to right, #434343 0%, black 100%)'symbolsStyle={{color:'rgba(255,255,255,0.8)'}}symbolSize={20}gap={20}animation={{ type: 'right', speed: 5 }}rotate={45}symbols={symbols}><div style={styles.content}><FaYinYang style={styles.icon} /><h1 style={styles.text}>乾坤</h1></div></Background></div>);
};
const styles = {container: { width: '100%', position: 'relative', height: 350 },content: {width: '100%',height: '100%',display: 'flex',justifyContent: 'center',alignItems: 'center',flexDirection: 'column',fontWeight: 'bold',},icon: { color: '#fff', fontSize: 120 },text: { color: '#fff', fontSize: 36, fontWeight: 'bold' },
};

Curtain 幕布

使用适当的实现可以很方便的实现一个图片幕布墙

import React from 'react';
import Background from 'smart-background';
export default () => {return (<div className="container"><BackgroundsymbolsStyle={{ opacity: 1 }}symbolSize={100}gap={0}symbols={[...images.map((img) => (<divstyle={{...styles.img,backgroundImage: `url(${img})`,}}/>)),]}animation={{ type: 'top', speed: 5 }}><div style={styles.content}>????<h1 style={styles.text}>Nice Image</h1></div></Background></div>);
};
const styles = {container: { width: '100%', position: 'relative', height: 350 },content: {width: '100%',height: '100%',display: 'flex',justifyContent: 'center',alignItems: 'center',flexDirection: 'column',background: 'rgba(0,0,0,0.5)',fontSize: 120,},img:{width: '100%',height: '100%',backgroundSize: 'cover',transform: 'scale(1.2)',},text: { color: '#fff', fontSize: 36, fontWeight: 'bold' },
};
const images = ['https://cdn.dribbble.com/users/3550736/screenshots/16244010/media/cead570591b124ed91c34dc9958f315c.jpg?compress=1&resize=1200x900','https://cdn.dribbble.com/users/3550736/screenshots/16244010/media/f03f7960c2d88f6fec3b43b9e1b5935b.jpg?compress=1&resize=1600x1200','https://cdn.dribbble.com/users/4666085/screenshots/16244479/media/d3d5b6d3e546fa17170b5daa46de375e.png?compress=1&resize=1200x900','https://cdn.dribbble.com/users/4588540/screenshots/16243929/media/430745b49a20f462bbfbdabc77b542f9.png?compress=1&resize=1200x900','https://cdn.dribbble.com/users/4835348/screenshots/16229715/media/5c68b55f75b04e96ff6f110ab2617996.png?compress=1&resize=800x600','https://cdn.dribbble.com/users/323673/screenshots/16223702/media/60b90d6e0f673e0ccee30056b8ae83d2.png?compress=1&resize=1200x900','https://cdn.dribbble.com/users/427857/screenshots/16157651/media/d8739d9147bb28ae6376e2206f67ba60.png?compress=1&resize=1600x1200','https://cdn.dribbble.com/users/427857/screenshots/16157651/media/18fcbf0c65cb47c14f633b162042cc65.png?compress=1&resize=1600x1200','https://cdn.dribbble.com/users/427857/screenshots/16157651/media/ecd0b4a299aabb66c8358b1051a139cd.png?compress=1&resize=1600x1200','https://cdn.dribbble.com/users/6532302/screenshots/16244413/media/c554d3e5bcf8c680ae56852b1b290fa7.jpg?compress=1&resize=1200x900','https://cdn.dribbble.com/users/2192147/screenshots/16242676/media/20f56e6b73bfc7ee4b9d9143f6449ad3.jpg?compress=1&resize=1200x900','https://cdn.dribbble.com/users/730703/screenshots/16207835/media/a9ad81cbcc73c87629471f4546828f2c.gif','https://cdn.dribbble.com/users/86429/screenshots/16241756/media/2d6331f16965e1ee4453b197e4d7f442.jpg?compress=1&resize=800x600','https://cdn.dribbble.com/users/5462867/screenshots/16165195/media/2a7203b0e3d1bbca91be7565d25d3f39.jpg?compress=1&resize=1200x900','https://cdn.dribbble.com/users/500242/screenshots/15428350/media/7b8a007e88d9050fe3d52c3625d2ff24.gif',
];

Exact 精确模式

使用精确模式，可以让元素固定在某一位置

import React from 'react';
import Background from 'smart-background';
import { FaApple } from 'react-icons/fa';
export default () => {return (<div className="container"><BackgroundsymbolsStyle={{ opacity: 1 }}exact={true}symbols={[...dots.map((dot) => (<divstyle={{position: 'absolute',width: dot.size,height: dot.size,borderRadius: dot.borderRadius,background: dot.background,top: dot.y,left: dot.x,}}/>)),]}><div style={styles.content}><FaApple /><h1 style={styles.text}>Apple</h1></div></Background></div>);
};
const styles = {container: { width: '100%', position: 'relative', height: 350 },content: {width: '100%',height: '100%',display: 'flex',justifyContent: 'center',alignItems: 'center',flexDirection: 'column',fontSize: 120,},text: { color: '#fff', fontSize: 36, fontWeight: 'bold' },
};
const dots = [{x: '-10%',y: '-20%',size: 200,background: 'linear-gradient(to top, #0ba360 0%, #3cba92 100%)',borderRadius: '50%',},{x: '60%',y: '40%',size: 500,background:'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)',borderRadius: '50%',},{x: '-30%',y: '50%',size: 450,background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',borderRadius: '50%',},
];

Random 随机模式

使用随机模式，可以让元素位置随机显示

import React from 'react';
import Background from 'smart-background';
import { Fa500Px,FaApple,FaAdobe,FaAdversal,FaAirbnb } from 'react-icons/fa';
export default () => {return (<div className="container"><Backgroundsymbols={icons}random={{fontSizeRange:[60,90]}}rotate={45}underlayImage='linear-gradient(to right, #ff0844 0%, #ffb199 100%)'><div style={styles.content}><FaApple style={{color:'#fff'}}/><h1 style={styles.text}>Apple</h1></div></Background></div>);
};
const styles = {container: { width: '100%', position: 'relative', height: 350 },content: {width: '100%',height: '100%',display: 'flex',justifyContent: 'center',alignItems: 'center',flexDirection: 'column',fontSize: 120,},text: { color: '#fff', fontSize: 36, fontWeight: 'bold' },
};
const icons = [<Fa500Px />,<FaApple />,<FaAdobe />,<FaAdversal />,<FaAirbnb />
]

Props

属性	说明	类型	默认值	是否必传
symbols	元素/字符/符号集合	(string \| ReactNode \| Element)[]	['●']	false
random	符号是否随机生成位置和大小	{ fontSizeRange: number[] } \| undefined		false
underlayColor	底衬颜色	string		false
underlayImage	底衬图片	string		false
symbolsStyle	符号样式	React.CSSProperties	{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
childrenWrapClassName	子组件容器类名	string		false
childrenWrapStyle	子组件容器样式	React.CSSProperties		false