Skip to content

Grulla-Software/avatar-reactjs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

14 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

npm Price License: ISC GitHub package version

Image text

avatar-reactjs πŸš€

Avatar-reactjs is an ideal component to display the user's profile image, it's light, elegant and very easy. This component speeds up software development by creating the user profile, as it can be reused over and over again. It is fully customizable so it allows you to meet any requirement.

This displays the user's profile picture or first and last name initials.

Installing πŸ”§

To install the component use the Node Package Manager (npm). You must open the command console at the root of your project and execute the command:

 npm install avatar-reactjs --save 

Demo πŸ’»

Click me to go to the demo on codeSandbox!

Usage πŸ› οΈ

Here is an example of how to implement the component:

import logo from './logo.svg';
import './App.css';
import AvatarReactjs from 'avatar-reactjs';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Avatar Component</h1>
        <img src={logo} className="App-logo" alt="logo" />
        <h2>avatar-reactjs</h2>
        <div className="container-avatarReactjs">
          <div className="example-avatarReactjs">
            <AvatarReactjs
              name={'Marvin Calvo'}
              fontSize={'medium'}
              backgroundColor={'blue'}
              fontColor={'azure'}
              width={'50px'}
              height={'50px'}
              borderRadius={'5%'}
            />
            <AvatarReactjs
              name={'Antonio Luna'}
              fontSize={'x-large'}
              backgroundColor={'blue'}
              fontColor={'azure'}
              width={'70px'}
              height={'70px'}
              borderRadius={'5%'}
            />
            <AvatarReactjs
              name={'Fabiola Gonzalez'}
              fontSize={'x-large'}
              backgroundColor={'blue'}
              fontColor={'azure'}
              width={'70px'}
              height={'70px'}
              borderRadius={'5%'}
            />
            <AvatarReactjs
              name={'Bill Gates'}
              fontSize={'x-large'}
              backgroundColor={'blue'}
              fontColor={'azure'}
              width={'70px'}
              height={'70px'}
              borderRadius={'5%'}
            />
            <AvatarReactjs
              name={'Albert Einstein'}
              fontSize={'x-large'}
              backgroundColor={'blue'}
              fontColor={'azure'}
              width={'100px'}
              height={'100px'}
              borderRadius={'5%'}
            />
            <AvatarReactjs
              name={'Isaac Newton'}
              fontSize={'xx-large'}
              backgroundColor={'blue'}
              fontColor={'azure'}
              width={'120px'}
              height={'120px'}
              borderRadius={'5%'}
            />
          </div>
          <div className="example-avatarReactjs">
            <AvatarReactjs
              name={'Marvin Calvo'}
              fontSize={'medium'}
              backgroundColor={'white'}
              fontColor={'blue'}
              width={'50px'}
              height={'50px'}
              borderRadius={'10%'}
            />
            <AvatarReactjs
              name={'Antonio Luna'}
              fontSize={'x-large'}
              backgroundColor={'white'}
              fontColor={'blue'}
              width={'70px'}
              height={'70px'}
              borderRadius={'10%'}
            />
            <AvatarReactjs
              name={'Fabiola Gonzalez'}
              fontSize={'x-large'}
              backgroundColor={'white'}
              fontColor={'blue'}
              width={'70px'}
              height={'70px'}
              borderRadius={'10%'}
            />
            <AvatarReactjs
              name={'Bill Gates'}
              fontSize={'x-large'}
              backgroundColor={'white'}
              fontColor={'blue'}
              width={'70px'}
              height={'70px'}
              borderRadius={'10%'}
            />
            <AvatarReactjs
              name={'Albert Einstein'}
              fontSize={'x-large'}
              backgroundColor={'white'}
              fontColor={'blue'}
              width={'100px'}
              height={'100px'}
              borderRadius={'10%'}
            />
            <AvatarReactjs
              name={'Isaac Newton'}
              fontSize={'xx-large'}
              backgroundColor={'white'}
              fontColor={'blue'}
              width={'120px'}
              height={'120px'}
              borderRadius={'10%'}
            />
          </div>
          <div className="example-avatarReactjs">
            <AvatarReactjs
              name={'Marvin Calvo'}
              fontSize={'medium'}
              backgroundColor={'black'}
              fontColor={'azure'}
              width={'50px'}
              height={'50px'}
              borderRadius={'20%'}
            />
            <AvatarReactjs
              name={'Antonio Luna'}
              fontSize={'x-large'}
              backgroundColor={'black'}
              fontColor={'azure'}
              width={'70px'}
              height={'70px'}
              borderRadius={'20%'}
            />
            <AvatarReactjs
              name={'Fabiola Gonzalez'}
              fontSize={'x-large'}
              backgroundColor={'black'}
              fontColor={'azure'}
              width={'70px'}
              height={'70px'}
              borderRadius={'20%'}
            />
            <AvatarReactjs
              name={'Bill Gates'}
              fontSize={'x-large'}
              backgroundColor={'black'}
              fontColor={'azure'}
              width={'70px'}
              height={'70px'}
              borderRadius={'20%'}
            />
            <AvatarReactjs
              name={'Albert Einstein'}
              fontSize={'x-large'}
              backgroundColor={'black'}
              fontColor={'azure'}
              width={'100px'}
              height={'100px'}
              borderRadius={'20%'}
            />
            <AvatarReactjs
              name={'Isaac Newton'}
              fontSize={'xx-large'}
              backgroundColor={'black'}
              fontColor={'azure'}
              width={'120px'}
              height={'120px'}
              borderRadius={'20%'}
            />
          </div>
          <div className="example-avatarReactjs">
            <AvatarReactjs
              name={'Marvin Calvo'}
              fontSize={'medium'}
              backgroundColor={'red'}
              fontColor={'black'}
              width={'50px'}
              height={'50px'}
              borderRadius={'30%'}
            />
            <AvatarReactjs
              name={'Antonio Luna'}
              fontSize={'x-large'}
              backgroundColor={'red'}
              fontColor={'black'}
              width={'70px'}
              height={'70px'}
              borderRadius={'30%'}
            />
            <AvatarReactjs
              name={'Fabiola Gonzalez'}
              fontSize={'x-large'}
              backgroundColor={'red'}
              fontColor={'black'}
              width={'70px'}
              height={'70px'}
              borderRadius={'30%'}
            />
            <AvatarReactjs
              name={'Bill Gates'}
              fontSize={'x-large'}
              backgroundColor={'red'}
              fontColor={'black'}
              width={'70px'}
              height={'70px'}
              borderRadius={'30%'}
            />
            <AvatarReactjs
              name={'Albert Einstein'}
              fontSize={'x-large'}
              backgroundColor={'red'}
              fontColor={'black'}
              width={'100px'}
              height={'100px'}
              borderRadius={'30%'}
            />
            <AvatarReactjs
              name={'Isaac Newton'}
              fontSize={'xx-large'}
              backgroundColor={'red'}
              fontColor={'black'}
              width={'120px'}
              height={'120px'}
              borderRadius={'30%'}
            />
          </div>
          <div className="example-avatarReactjs">
            <AvatarReactjs
              name={'Marvin Calvo'}
              fontSize={'medium'}
              backgroundColor={'green'}
              fontColor={'azure'}
              width={'50px'}
              height={'50px'}
            />
            <AvatarReactjs
              name={'Antonio Luna'}
              fontSize={'x-large'}
              backgroundColor={'green'}
              fontColor={'azure'}
              width={'70px'}
              height={'70px'}
            />
            <AvatarReactjs
              name={'Fabiola Gonzalez'}
              fontSize={'x-large'}
              backgroundColor={'green'}
              fontColor={'azure'}
              width={'70px'}
              height={'70px'}
            />
            <AvatarReactjs
              name={'Bill Gates'}
              fontSize={'x-large'}
              backgroundColor={'green'}
              fontColor={'azure'}
              width={'70px'}
              height={'70px'}
            />
            <AvatarReactjs
              name={'Albert Einstein'}
              fontSize={'x-large'}
              backgroundColor={'green'}
              fontColor={'azure'}
              width={'100px'}
              height={'100px'}
            />
            <AvatarReactjs
              name={'Isaac Newton'}
              fontSize={'xx-large'}
              backgroundColor={'green'}
              fontColor={'azure'}
              width={'120px'}
              height={'120px'}
            />
          </div>
          <div className="example-avatarReactjs">
            <AvatarReactjs
              src={'img/avatar7.jpg'}
              name={'Marvin Calvo'}
              fontSize={'medium'}
              backgroundColor={'green'}
              fontColor={'azure'}
              width={'50px'}
              height={'50px'}
            />
            <AvatarReactjs
              src={'img/avatar3.jpg'}
              name={'Antonio Luna'}
              fontSize={'x-large'}
              backgroundColor={'green'}
              fontColor={'azure'}
              width={'70px'}
              height={'70px'}
            />
            <AvatarReactjs
              src={'img/avatar2.jpg'}
              name={'Fabiola Gonzalez'}
              fontSize={'x-large'}
              backgroundColor={'green'}
              fontColor={'azure'}
              width={'70px'}
              height={'70px'}
            />
            <AvatarReactjs
              src={'img/avatar4.jpg'}
              name={'Bill Gates'}
              fontSize={'x-large'}
              backgroundColor={'green'}
              fontColor={'azure'}
              width={'70px'}
              height={'70px'}
            />
            <AvatarReactjs
              src={'img/avatar5.jpg'}
              name={'Albert Einstein'}
              fontSize={'x-large'}
              backgroundColor={'green'}
              fontColor={'azure'}
              width={'100px'}
              height={'100px'}
            />
            <AvatarReactjs
              src={'img/avatar6.jpg'}
              name={'Isaac Newton'}
              fontSize={'xx-large'}
              backgroundColor={'green'}
              fontColor={'azure'}
              width={'120px'}
              height={'120px'}
            />
          </div>
        </div>
      
        <br/>
      </header>
    </div>
  );
}
export default App;

Props of styles πŸ“¦

Props for component styles are displayed as a table with Name, Type, Default, and Description as headings.

Required props are marked with *.

Name Type Default Description
borderRadius string 50% Indicates the border radius of avatar component.
backgroundColor string red Indicates the background color of avatar component.
fontColor string white Indicates the text color of avatar component.
height string 100px Indicates the height of avatar component.
width string 100px Indicates the width of avatar component.
fontSize string xx-large Indicates the text size of avatar component.

Additional usage information πŸ“‹

Additional information about using the component pros.

  • borderRadius: Use this prop for indicate the border radius of the avatar component. This value is indicated as a string and percentage format for example: "10%" or "50%".
  • backgroundColor: Use this prop for indicate the background color of the avatar component. You can specify this value as a string, in the format RGB hex ("#AA00FF") or RGB decimal ("rgb (71, 98, 176)") or RGB percentage ("rgb (27%, 38%, 69% ) ") or the name of color ("red").
  • fontColor: Use this prop for indicate the text color of the avatar component. Specify this value as a string, in the format RGB hex ("#AA00FF") or RGB decimal ("rgb (71, 98, 176)") or RGB percentage ("rgb (27%, 38%, 69% ) ") or the name of the color ("white").
  • height: Use this prop for indicate the height of avatar component. Specify this as a string and in pixel format ("30px") or percentage format ("10%").
  • width: Use this prop for indicate the width of avatar component. Specify this as a string and in pixel format ("30px") or percentage format ("10%").
  • fontSize: Use this prop to indicate the size of text for the avatar component. Specify this as a string and in pixel format ("20px") or REM format ("1rem") or EM format ("1em") or the name of size("smaller", "medium", "large", " larger", "x-large", "xx-large").

Props for functionality πŸ“¦

Props for component functionality are displayed as a table with Name, Type, Default, and Description as headers.

Required props are marked with *.

Name Type Default Description
src string Indicates the URL of image that will display the avatar component.
name* string πŸ˜€ Indicates the name that the avatar component will display.

Additional usage information πŸ“‹

Additional information about using the component pros.

  • src: Use this prop to indicate the URL of the image that the avatar component will display. This must be indicated as a string.
  • name: Use this property to indicate the name that the avatar component will display. This must be indicated as a string.

Authors βœ’οΈ

People who helped build the project from its inception

  • Marvin Calvo AcuΓ±a - Software Development - marvinjesus
  • Marvin Calvo AcuΓ±a - Documentation - marvinjesus

License πŸ“„

This project is licensed under the ISC License - see the file LICENSE.md for details.

About

Component for user profile avatar

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published