{"id":17349683,"url":"https://github.com/yuanguandong/smart-background","last_synced_at":"2025-04-14T20:31:13.081Z","repository":{"id":47213868,"uuid":"395919687","full_name":"yuanguandong/smart-background","owner":"yuanguandong","description":"Automatically generate the background of the symbol picture, so you no longer have to worry about the background 自动生成符号背景，让你不再为背景头疼","archived":false,"fork":false,"pushed_at":"2021-09-08T04:46:49.000Z","size":4929,"stargazers_count":78,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T09:01:43.246Z","etag":null,"topics":["background","background-image","smart-background"],"latest_commit_sha":null,"homepage":"https://yuanguandong.github.io/smart-background/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yuanguandong.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-14T06:51:49.000Z","updated_at":"2024-10-18T10:25:38.000Z","dependencies_parsed_at":"2022-09-26T20:31:20.829Z","dependency_job_id":null,"html_url":"https://github.com/yuanguandong/smart-background","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanguandong%2Fsmart-background","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanguandong%2Fsmart-background/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanguandong%2Fsmart-background/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanguandong%2Fsmart-background/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yuanguandong","download_url":"https://codeload.github.com/yuanguandong/smart-background/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248955485,"owners_count":21189128,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["background","background-image","smart-background"],"created_at":"2024-10-15T16:56:37.288Z","updated_at":"2025-04-14T20:31:11.650Z","avatar_url":"https://github.com/yuanguandong.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Smart Background\n[![npm version](https://badge.fury.io/js/smart-background.svg)](#) [![npm version](https://img.shields.io/badge/react-%3E16-green)](#) [![npm version](\thttps://img.shields.io/github/issues/yuanguandong/smart-background)](#) [![npm version](\thttps://img.shields.io/github/forks/yuanguandong/smart-background)](#) [![npm version](https://img.shields.io/github/license/yuanguandong/smart-background)](#) [![npm version](\thttps://img.shields.io/github/stars/yuanguandong/smart-background)](#)\n### An React Component Can Automatically Generate The Background\n一个快速生成元素背景的react组件\n\n![repository-open-graph-template副本](./snapshot.png)\n\n\n### Live demo\nhttps://yuanguandong.github.io/smart-background/\n\n### Install\n```bash\nnpm i smart-background -S\n```\n\n### How to use\n```js\nimport React from 'react';\nimport Background from 'smart-background';\nimport { FaLaugh } from 'react-icons/fa';\n\nexport default () =\u003e {\n return (\n \u003cdiv style={styles.container}\u003e\n \u003cBackground underlayColor=\"#f00\" animation={{ type: 'bottom', speed: 5 }}\u003e\n \u003cdiv style={styles.content}\u003e\n \u003cFaLaugh style={styles.icon} /\u003e\n \u003ch1 style={styles.text}\u003eJUST DO IT\u003c/h1\u003e\n \u003c/div\u003e\n \u003c/Background\u003e\n \u003c/div\u003e\n );\n};\n\nconst styles = {\n container: { width: '100%', position: 'relative', height: 350 },\n content: {\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'column',\n },\n icon: { color: '#fff', fontSize: 120 },\n text: { color: '#fff', fontSize: 36, fontWeight: 'bold' },\n};\n```\n\n### Props\n\n| property | description | type | defaultValue | required |\n| --------------------- | -------------------------- | -------------------------------------------------------------- | ------------------------------- | -------- |\n| symbols | 元素/字符/符号集合 | (string \\| ReactNode \\| Element)[ ] | ['●'] | false |\n| random | 符号是否随机生成位置和大小 | { fontSizeRange: number[] } \\| undefined | | false |\n| underlayColor | 底衬颜色 | string | | false |\n| underlayImage | 底衬图片 | string | | false |\n| symbolsStyle | 符号样式 | Object | {color: '#000', opacity: '0.3'} | false |\n| rotate | 符号旋转角度 | number | 0 | false |\n| symbolSize | 符号大小 | number | 90 | false |\n| gap | 符号间距 | number | 10 | false |\n| animation | 滚动动画 | {type: 'left' \\| 'right' \\| 'top' \\| 'bottom'; speed: number;} | | false |\n| exact | 精确模式 | boolean | false | false |\n| childrenWrapClassName | 子组件容器类名 | string | | false |\n| childrenWrapStyle | 子组件容器类名 | React.CSSProperties | | false |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuanguandong%2Fsmart-background","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuanguandong%2Fsmart-background","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuanguandong%2Fsmart-background/lists"}