Smart Background

在开发过程中，我们经常会遇到使用背景的地方，比如登录页面，用户信息页面，封面图……

寻找契合业务主题的背景十分耗费精力，总觉得做的背景不合适，

如果直接用图片呢，逻辑是比较简单，但寻找到一张契合业务主题的图片也不是那么容易，

所以想到用符号生成幕布一样的背景，从这个出发点做了这个组件，

滚动的图片墙可能这个需求比较常见，用SmartBackground可以很快速的实现，

希望可以帮到您，别忘了star哟

An React Component Can Automatically Generate The Background

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

Repository

github.com/yuanguandon…

Live demo / Home page

yuanguandong.github.io/smart-backg…

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 (
    <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' },
};

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