{"id":21873354,"url":"https://github.com/jacksonkasi0/multi-avatars","last_synced_at":"2026-05-09T07:02:26.988Z","repository":{"id":43274000,"uuid":"467414109","full_name":"jacksonkasi0/multi-avatars","owner":"jacksonkasi0","description":" multi-avatars is a React component based on the npm package avataaars.  It is random to you depending on what you are giving (or) give some other svg avatars.","archived":false,"fork":false,"pushed_at":"2022-03-10T17:53:19.000Z","size":243,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-20T15:56:26.594Z","etag":null,"topics":["avataaars","avatar","avatar-generator","avatar-placeholder","avatars","multi","multi-avatar","multi-avatars","npm","npm-module","npm-package","react","reactjs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/multi-avatars","language":"JavaScript","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/jacksonkasi0.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":"2022-03-08T07:51:53.000Z","updated_at":"2024-01-31T19:13:01.000Z","dependencies_parsed_at":"2022-09-20T19:53:18.849Z","dependency_job_id":null,"html_url":"https://github.com/jacksonkasi0/multi-avatars","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jacksonkasi0/multi-avatars","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacksonkasi0%2Fmulti-avatars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacksonkasi0%2Fmulti-avatars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacksonkasi0%2Fmulti-avatars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacksonkasi0%2Fmulti-avatars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jacksonkasi0","download_url":"https://codeload.github.com/jacksonkasi0/multi-avatars/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacksonkasi0%2Fmulti-avatars/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32810381,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"online","status_checked_at":"2026-05-09T02:00:06.633Z","response_time":123,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["avataaars","avatar","avatar-generator","avatar-placeholder","avatars","multi","multi-avatar","multi-avatars","npm","npm-module","npm-package","react","reactjs"],"created_at":"2024-11-28T07:07:38.013Z","updated_at":"2026-05-09T07:02:26.954Z","avatar_url":"https://github.com/jacksonkasi0.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Multi Avatars?\n\n**Multi Avatars: 🎉**\n\n\u003cp align=\"center\"\u003e\u003cimg src='https://dev-to-uploads.s3.amazonaws.com/uploads/articles/in718c8v70mkc3dbl7qu.gif' style='border-radius: 10px' /\u003e\u003c/p\u003e\n\nmulti-avatars is a React component based on the **npm package [avataaars](https://www.npmjs.com/package/avataaars)**.\n\nIt is random to you depending on what you are giving\nOr give some other svg avatars.\n\n#### NOTE: **avataaars is a open-source project**\n---\n\n## Features\n\n - SVG based\n - Light weight \n - Scalable\n - Easy to use\n - Fast\n - It's don't affect your web performance 🚀\n\n## Usage\n\n**for dev:**\n\n\u003ca href=\"https://codesandbox.io/embed/how-to-do-condition-based-dont-repeat-yourself-dry-principle-in-react-js-forked-fv4c54?\n\" target=\"_blank\" \u003e\n\u003cimg src=\"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qfxr44mftqozse735mp.png\" style=\"width:150px; border-radius:6px\"/\u003e\n\u003c/a\u003e\n\n**for use:**\n\n\u003ca href=\"https://codesandbox.io/s/relaxed-grothendieck-d39qdk?\" target=\"_blank\" \u003e\n\u003cimg src=\"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qfxr44mftqozse735mp.png\" style=\"width:150px; border-radius:6px\"/\u003e\n\u003c/a\u003e\n\nFirst, you need to install the `multi-avatars` component package, here you run\n\n```sh\nnpm i multi-avatars\n```\n\nThen, in your React app, import the `avataaars ` and `multi-avatars` component and put it where you like it to be, for example\n\n```sh\nimport Avatars from \"multi-avatars\";\n\nexport default function App() {\n  return (\n      \u003cAvatars\n        avatarStyle={[true, 500]}\n        topType={[true, 1000]}\n        accessoriesType={[true, 1200]}\n        //facialHairType={[true,500]}\n        //facialHairType={[true,500]}\n        clothesType={[true, 500]}\n        clothesColorType={[true, 1000]}\n        eyeType={[true]}\n        eyebrow={[true, 2000]}\n        mouthType={[true, 1200]}\n        skinType={[\"Brown\"]}\n      /\u003e\n  );\n}\n```\n\n## expalin the code: 👀\n\n- The first of these is **true** which gives random avatars parts.\n- The second refers to the number of **milliseconds** to give / change random avatars parts.\n\n- Maybe if you only gave true then Avatars will give only once and it will not change after that.\nThose parts will change only if you give the second millisecond.\n\n#### For example:\n\n```sh\neyeType={[true]}\n```\n\n- the `eyeType` only does not change as the above avatar is given only true in eyeType.\n\n```sh\nskinType = {[\"Brown\"]\n```\n\n- And if you do not want to change a part of something you can give it(value) directly.\nLook at the skin color of the avatar in the picture above...\n\n\u003e value = **Brown**\n\n[Avatar Options](https://getavataaars.com) click here to know the avatars options...\n\n- If you do not give a props something will probably take its default value.\n\n- But `facialHairType` only will not appear in the avatar unless you use it alone.\n\n```sh\n// facialHairType={[true,500]} // if don't wand this field (facialHair), so u do not use this\n```\n\n---\n\n## Hey guys 👋 read adout this...\n\n\u003ca href=\"https://dev.to/jacksonkasi/how-i-am-create-my-first-beautiful-npm-package-with-21ga\" target=\"_blank\" \u003e\n\u003cimg src=\"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y51iomyhydwnv1fbs0q7.png\" style=\"width:60px\" \u003e\n\u003c/a\u003e\n\n**[Read my DEV POST✨](https://dev.to/jacksonkasi/how-i-am-create-my-first-beautiful-npm-package-with-21ga)**\n\n### resource/info:\n\n- [dry - qiuze](https://stackoverflow.com/questions/71244031/how-to-do-condition-based-dont-repeat-yourself-dry-principle-in-react-js)\n\n- [How to publish your react component package to npm?](https://levelup.gitconnected.com/how-to-publish-your-react-component-package-to-npm-20ee4f81a506)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacksonkasi0%2Fmulti-avatars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjacksonkasi0%2Fmulti-avatars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacksonkasi0%2Fmulti-avatars/lists"}