sorrycc / weekly

MDH Weekly 前端周刊,每周一上午 9 点发布。

Home Page:https://mdhweekly.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

自荐: Smart Background 一个快速生成元素背景的react组件

yuanguandong opened this issue · comments

Smart Background

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

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

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

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

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

npm version npm version npm version npm version npm version npm version

An React Component Can Automatically Generate The Background

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

img

repository

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

Home Page | Live demo

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

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

求推荐😁