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

Question

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

从这个出发点有了这个组件，滚动的图片墙可能这个需求比较常见，用 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">
      <Background
        underlayImage='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">
      <Background
        symbolsStyle={{ opacity: 1 }}
        symbolSize={100}
        gap={0}
        symbols={[
          ...images.map((img) => (
            <div
              style={{
                ...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">
      <Background
        symbolsStyle={{ opacity: 1 }}
        exact={true}
        symbols={[
          ...dots.map((dot) => (
            <div
              style={{
                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">
      <Background
        symbols={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

Tip 注意

Background 的高度默认继承父级元素，如果 Background 有 children，需要给 Background 的父级元素添加 position:relative 属性