{"_id":"@0x111/react-user-avatar","_rev":"1-e8c44bed9767f4a1ca67fca6543e8b56","name":"@0x111/react-user-avatar","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@0x111/react-user-avatar","version":"1.0.0","description":"React component for a user avatar with fallback to colored initials","main":"user-avatar.js","style":"example.css","scripts":{"build":"babel index.js -s -o user-avatar.js","prepublish":"npm run build","test":"budo test.js -- -t babelify"},"keywords":["react-component","avatar","initials"],"author":{"name":"Richard Szolár","email":"npm@rs-labs.io"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/0x111/react-user-avatar.git"},"devDependencies":{"babel-cli":"^6.3.13","babel-preset-es2015":"^6.3.13","babel-preset-react":"^6.3.13","babelify":"^7.2.0","budo":"^7.0.2","react":"^16.2.0","react-dom":"^16.2.0"},"dependencies":{"contrast":"^1.0.1","initials":"^2.1.5","prop-types":"^15.6.0"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0 || ^16.0.0","react-dom":"^0.14.0 || ^15.0.0 || ^16.0.0"},"gitHead":"84b46cc584691d8ae23c65d3f132e601f898bb67","bugs":{"url":"https://github.com/0x111/react-user-avatar/issues"},"homepage":"https://github.com/0x111/react-user-avatar#readme","_id":"@0x111/react-user-avatar@1.0.0","_nodeVersion":"10.14.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-JiEN2kK246E1U8N/MMYB8sU/ydzxC3l/kDWLKKLtJMMTXRSFt7CUwZnnJvx9e6MsLaxcLYxVXYyzkar+99fW3w==","shasum":"23b9da99dd9bf9cc32f49fac54de267e85c83af9","tarball":"https://registry.npmjs.org/@0x111/react-user-avatar/-/react-user-avatar-1.0.0.tgz","fileCount":8,"unpackedSize":18013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejLfCCRA9TVsSAnZWagAA+mQP/jIhAi5aCeVQ3N7C0Ejp\n6X38Ss2fkreTkIu70h5hfSZOyq+tKTKBqaf5NxurieZoTw6RVnV0vu0A5Svc\nV5zRIdREiwGChFsTbTwqRmIpqP4orEp8fC4uLFVlHYksaBswPn1oDEFGlKNN\nbr7oPX1wXUsyORfkkMWFIW0D09azJBuAmNEY5b26/NHDtb4+mPmLdREak27I\nxCVh28n2ina3uJH0EnK/yHrZsrQSYMR9QP41V7a9v/Km0fVjm9MQikV10Bpw\n6Ma8iT+AWMYTaFw/9QQ6yDv2kq1zAB69NGJFj0Wxm2pMAZk36ynlRESfIkt0\nL90drLUGr/wa9oyyT7WbWGbEFkXRKhkWPjIXTRnALCTkBaBJFOUc6UU2q5f9\nYpU6165btmWzf0DCyGbckaSNI27YDbsIUuhSqttw4oAqsFlrnHP9p8JjL0Pa\nEm0GLUmMtLj38KiqD3nXtkymwaEKCBccX65FeR6CgZAuIqfpAJeCONZNx8Xw\n6Q5MBXdI5WICzjrrPhX0E3Ct8wiCodcpqFFyC+duAlgWD6Huqjs2oHXfBCvd\nL/ajTrIcHaOmErN3LEq4MDd2vgRKWeaR2PYsba1Yixi5idDORWsFbKO9cTII\n5WYEhGrQVp8Xu4O0qjMKVp4sRUSgHtsQ3BIu2wGm/uWI5CvxFxkDTkcAglMj\nHif5\r\n=382Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhXgzkUIInTWWldw41D9eI6Fv0X+OCfZSr6rbC91Kf9wIgQkYj5vqmctMfKDu92jsbKFf7DNoCsTKt/CI+DLEUoo0="}]},"maintainers":[{"name":"0x111","email":"r@richardszolar.me"}],"_npmUser":{"name":"0x111","email":"r@richardszolar.me"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-user-avatar_1.0.0_1586280386235_0.9832787742232179"},"_hasShrinkwrap":false}},"time":{"created":"2020-04-07T17:26:25.975Z","1.0.0":"2020-04-07T17:26:26.463Z","modified":"2022-04-04T10:27:33.792Z"},"maintainers":[{"name":"0x111","email":"r@richardszolar.me"}],"description":"React component for a user avatar with fallback to colored initials","homepage":"https://github.com/0x111/react-user-avatar#readme","keywords":["react-component","avatar","initials"],"repository":{"type":"git","url":"git+https://github.com/0x111/react-user-avatar.git"},"author":{"name":"Richard Szolár","email":"npm@rs-labs.io"},"bugs":{"url":"https://github.com/0x111/react-user-avatar/issues"},"license":"MIT","readme":"# React UserAvatar\n\nA bare-bones user avatar display with support for falling back to using the user's initials on a colored background as the avatar.\n\n\n\n## Installation\n\n`npm install -S react-user-avatar`\n\n## Usage\n\n```js\n \n \n \n \n \n \n```\n\nThis module uses react-style inline styles to narrow the api, yet allows for reasonable extensibility by exposing\na number of DOM classes. Take a look (or simply use) `example.css` for ideas.\n\nThe fallback avatar's color may be set by passing in the `color` prop, or you can customize the range of colors\nused by passing in an array of `colors`. The component uses a simple calculation to consistently use the same\ncolor for the same user's name every time.\n\nIf the component determines that the color chosen was visually light, it will apply a `UserAvatar-light` class to the root element.\nIf the colors chosen was dark, it will apply `UserAvatar-light`. Take advantage of these to use the appropriately colored text or border\nwhen styling the component.\n","readmeFilename":"README.md"}