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一下留着以后备用