{"id":13457739,"url":"https://github.com/dapi-labs/react-nice-avatar","last_synced_at":"2025-05-15T01:05:39.531Z","repository":{"id":43638378,"uuid":"372010522","full_name":"dapi-labs/react-nice-avatar","owner":"dapi-labs","description":"react library for generating avatar","archived":false,"fork":false,"pushed_at":"2024-07-23T00:41:28.000Z","size":1599,"stargazers_count":1130,"open_issues_count":6,"forks_count":102,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-05-11T20:04:41.275Z","etag":null,"topics":["avatar","avatar-generator","avatar-placeholder","react","react-avatar","react-avatar-editor"],"latest_commit_sha":null,"homepage":"https://nice-avatar.wwayne.com","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/dapi-labs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-29T15:41:45.000Z","updated_at":"2025-05-10T06:18:59.000Z","dependencies_parsed_at":"2023-11-28T12:29:22.817Z","dependency_job_id":"5fc62b5d-d8fb-4f83-bd0a-a0b984bc96df","html_url":"https://github.com/dapi-labs/react-nice-avatar","commit_stats":{"total_commits":108,"total_committers":10,"mean_commits":10.8,"dds":"0.15740740740740744","last_synced_commit":"8a93a5c2b64d625fd90b5b49fbf36cfe91187940"},"previous_names":["dapilab/react-nice-avatar"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dapi-labs%2Freact-nice-avatar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dapi-labs%2Freact-nice-avatar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dapi-labs%2Freact-nice-avatar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dapi-labs%2Freact-nice-avatar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dapi-labs","download_url":"https://codeload.github.com/dapi-labs/react-nice-avatar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254254039,"owners_count":22039792,"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":["avatar","avatar-generator","avatar-placeholder","react","react-avatar","react-avatar-editor"],"created_at":"2024-07-31T09:00:35.172Z","updated_at":"2025-05-15T01:05:39.501Z","avatar_url":"https://github.com/dapi-labs.png","language":"TypeScript","readme":"# react-nice-avatar\n\n[![Version](http://img.shields.io/npm/v/react-nice-avatar.svg)](https://www.npmjs.org/package/react-nice-avatar)\n[![npm download][download-image]][download-url]\n[![Build Status](https://app.travis-ci.com/dapi-labs/react-nice-avatar.svg?branch=main)](https://app.travis-ci.com/github/dapi-labs/react-nice-avatar)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/df23baf6-daac-4ce5-a0b6-5baade2cb822/deploy-status)](https://app.netlify.com/sites/gracious-turing-db4aa3/deploys)\n\n[download-image]: https://img.shields.io/npm/dm/react-nice-avatar.svg?style=flat-square\n[download-url]: https://npmjs.org/package/react-nice-avatar\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://nice-avatar.chilllab.io/\"\u003e\n        \u003cimg src=\"https://user-images.githubusercontent.com/5305874/131275587-a6f44325-cb18-4a1c-8a1c-785942e751e7.png\" \n             width=\"600\" alt=\"imagewall\" /\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n## Online editor / preview\n\n- https://nice-avatar.wwayne.com\n\n## Assets\n\n- Designer: [@Micah](https://www.figma.com/@Micah) on Figma\n- Figma files: [Avatar Illustration System](https://www.figma.com/community/file/829741575478342595)\n\n## Installation\n\n```sh\nnpm install react-nice-avatar\n```\n\nor\n\n```sh\nyarn add react-nice-avatar\n```\n\n## Usage\n\n1. Import the component.\n    ```js\n    import Avatar, { genConfig } from 'react-nice-avatar'\n    ```\n2. Generate a configuration\n   \n    Config can be generated with a seed, a seed is a string of name, email or any string you like\n    ```js\n    const config = genConfig(\"hi@dapi.to\") \n    ```\n    \n    or it can be generate with a customized object, plz check the Options below for what attributes can be passed in\n    ```js\n    const config = genConfig({ sex: \"man\", hairStyle: \"mohawk\" }) \n    ```\n    \n    or generating a random config by passing nothing to the function genConfig\n    ```js\n    const config = genConfig() \n    ```\n    \n3. Render the component with specific width / height and configuration.\n    ```jsx\n    \u003cAvatar style={{ width: '8rem', height: '8rem' }} {...config} /\u003e\n    ```\n    or\n    \n    ```jsx\n    \u003cAvatar className=\"w-32 h-32\" {...config} /\u003e\n    ```\n\n## Options\n\nThe options can be passed into genConfig or as React props\n\n| key            | type   | default | accept                                       | tips                 |\n| -------------- | ------ | ------- | -------------------------------------------- | -------------------- |\n| `id`           | string |         |                                              | Only for React Props |\n| `className`    | string |         |                                              | Only for React Props |\n| `style`        | object |         |                                              | Only for React Props |\n| `shape`        | string | circle  | circle, rounded, square                      | Only for React Props |\n| `sex`          | string |         | man, woman                                   |                      |\n| `faceColor`    | string |         |                                              |                      |\n| `earSize`      | string |         | small, big                                   |                      |\n| `hairColor`    | string |         |                                              |                      |\n| `hairStyle`    | string |         | normal, thick, mohawk, womanLong, womanShort |                      |\n| `hairColorRandom` | boolean |  false   |                           | thick,mohawk default only be black |\n| `hatColor`     | string |         |                                              |                      |\n| `hatStyle`     | string |         | none, beanie, turban                         | Usually is none      |\n| `eyeStyle`     | string |         | circle, oval, smile                          |                      |\n| `glassesStyle` | string |         | none, round, square                          | Usually is none      |\n| `noseStyle`    | string |         | short, long, round                           |                      |\n| `mouthStyle`   | string |         | laugh, smile, peace                          |                      |\n| `shirtStyle`   | string |         | hoody, short, polo                           |                      |\n| `shirtColor`   | string |         |                                              |                      |\n| `bgColor`      | string |         |                                              |                      |\n| `isGradient`   | boolean |   false   |                                           |                      |\n\n## Development\n\n1. Clone the repo:\n    ```sh\n    $ git clone git@github.com:dapi-labs/react-nice-avatar.git\n    $ cd react-nice-avatar\n    ```\n2. Install dependencies:\n    ```sh\n    $ yarn\n    ```\n3. Start the server for the demo:\n    ```sh\n    $ make dev\n    ```\n4. Open the browser to reivew the demo:\n    ```sh\n    $ open http://localhost:8080\n    ```\n5. Edit the files inside [src](/src).\n\n## Test\n\n1. Lint test:\n    ```sh\n    $ make lint-test\n    ```\n\n2. code test:\n    ```sh\n    $ make test\n    ```\n\n## Release\n\n```sh\n$ make release level=patch | minor | major | 1.3.0\n```\n\n## License\n\nReleased under [MIT](/LICENSE) by [@dapi-labs](https://github.com/dapi-labs).\n","funding_links":[],"categories":["Other Components","TypeScript","DevTools"],"sub_categories":["Languages"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdapi-labs%2Freact-nice-avatar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdapi-labs%2Freact-nice-avatar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdapi-labs%2Freact-nice-avatar/lists"}