Smart Background

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

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

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

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

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

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

An React Component Can Automatically Generate The Background

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

Repository

https://github.com/yuanguandong/smart-background

Live demo / Home page

https://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 (

    <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

感兴趣的先start一下留着以后备用