react-initial-avatar

React Initials Avatar

Create sleek avatars with initials using the lightweight 'react-initial-avatar' component for your React applications

Installation

npm install react-initial-avatar

Usage

import React from "react";
import Avatar from "react-initial-avatar";

const App = () => {
  return (
    <div>
      <Avatar name="John Doe" />
    </div>
  );
};

export default App;

Props

Prop	Type	Default	Description
name	string		The name to extract initials from.
height	number	30px	The height of the initials container.
width	number	30px	The width of the initials container.
backgroundColor	string	#f0f8ff	The background color of the initials container.
color	string	#6495ed	The text color (initials color) inside the container.
borderRadius	number	none	The border radius of the initials container.
borderWidth	number	none	The border width of the initials container.
borderColor	string	none	The border color of the initials container.
style	object	{}	(optional) custom style object.
splitWith	string	" "	delimeter to split name with

Examples

import React from "react";
import Avatar from "react-initial-avatar";

const Example = () => {
  return (
    <div>
      <Avatar name="Afzal Ali" />
      <Avatar color="red" backgroundColor="#FFF" name="Elizabeth Smith Brown" />
      <Avatar borderRadius={50} borderWidth={1} borderColor="black" name="Jane Smith" />
    </div>
  );
};
export default Example;

License

MIT © afzalali27