V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
favori
V2EX  ›  React

smart-background 自动生成符号背景的 react 组件,做滚动背景墙非常方便

  •  1
     
  •   favori · 2021-08-31 23:24:37 +08:00 · 895 次点击
    这是一个创建于 940 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Smart Background

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

    An React Component Can Automatically Generate The Background

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

    repository-open-graph-template 副本

    Repository

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

    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
    childrenWrapClassName 子组件容器类名 string false
    childrenWrapStyle 子组件容器类名 React.CSSProperties false
    感觉以后会用到的就先点个 star 收藏吧!感谢!
    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2832 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 14:40 · PVG 22:40 · LAX 07:40 · JFK 10:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.