@agney/react-avatar v1.1.2

React Avatar

Create Image Avatars with text based fallbacks.

Demo Storybook

Features ✨

1. Ability to render image avatar or text avatar as circle or square.
2. Ability to render text based fallbacks for images for the time they take to load or error.
3. Renders text based avatars and backgrounds based on text passed in.
4. Autoscales text if it doesn't fit the container width.
5. Automatically determines readable text color depending on background.
6. Exposes a hook to use/generate gravatar for a user.
7. Exposes a context so you can configure avatar components across your application.

Install

npm install @agney/react-avatar
# OR
yarn add @agney/react-avatar

Requires React v16.8 or above and Styled Components v4 or above.

Usage

import React from "react";
import { Avatar } from "@agney/react-avatar";

const App = () => {
  return (
    <Avatar
      src="https://gravatar.com/avatar/7c4ff521986b4ff8d29440beec01972d?s=400&d=robohash&r=x"
      text="CM"
    />
  );
}

export default App;

API

See Storybook for more examples and code snippets.

Context

Package exposes a context in the form of AvatarContext.

import { Avatar, AvatarContext } from '../.';

function App() {
  const contextValue = React.useMemo(() => ({
    backgrounds: ['#000000', '#DD2C00', '#6200EA', '#3F51B5'], // Any props used by Avatar can be used here.
  }), []);
  return (
    <AvatarContext.Provider>
      <div style={{ display: 'flex' }}>
        <Avatar
          htmlWidth='150px'
          text="Fallback"
          backgrounds={['red']}
          textColor='white'
        />
        <Avatar
          htmlWidth='150px'
          text="AJ"
        />
      </div>
    </AvatarContext.Provider>
  )
}

Values on the Context Provider are overridden by any props that are on the individual component. Context Provider is not compulsory for usage of Avatar component. Read more about Context API on docs.

useGravatar hook

Gravatars or Globally Recognized Avatars is a free service that allows you to share profile pictures/avatars across different sites and services. react-avatar exposes a hook that makes it easier for you to request and use these gravatars in your application.

Usage:

import React from "react";
import { Avatar, useGravatar } from "@agney/react-avatar";

const App = () => {
  const url = useGravatar('person@email.com');
  return (
    <Avatar
      src={url}
      text="CM"
    />
  );
}

export default App;

API

For a complete list of available options, view Gravatar docs

🤝 Contributing

Contributions, issues and feature requests are welcome!Feel free to check issues page.

Development

We use yarn v1 for development.

yarn
yarn start

# To run example
cd example
yarn start

# Running storybook
yarn run storybook

Run tests

yarn test

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2020 Agney Menon <agney@outlook.in>. This project is MIT licensed.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!