https://github.com/yuanguandong/smart-background
Automatically generate the background of the symbol picture, so you no longer have to worry about the background 自动生成符号背景，让你不再为背景头疼
https://github.com/yuanguandong/smart-background
background background-image smart-background
Last synced: 8 months ago
JSON representation
Automatically generate the background of the symbol picture, so you no longer have to worry about the background 自动生成符号背景，让你不再为背景头疼
- Host: GitHub
- URL: https://github.com/yuanguandong/smart-background
- Owner: yuanguandong
- License: mit
- Created: 2021-08-14T06:51:49.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-09-08T04:46:49.000Z (about 4 years ago)
- Last Synced: 2025-03-28T09:01:43.246Z (8 months ago)
- Topics: background, background-image, smart-background
- Language: TypeScript
- Homepage: https://yuanguandong.github.io/smart-background/
- Size: 4.7 MB
- Stars: 78
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Smart Background
[](#) [](#) [](#) [](#) [](#) [](#)
### An React Component Can Automatically Generate The Background
一个快速生成元素背景的react组件
### Live demo
https://yuanguandong.github.io/smart-background/
### Install
```bash
npm i smart-background -S
```
### How to use
```js
import React from 'react';
import Background from 'smart-background';
import { FaLaugh } from 'react-icons/fa';
export default () => {
return (
JUST DO IT
);
};
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 |