# react-initial-avatar

> Create Avatar from name initials

Latest version **1.1.0** (published 2024-03-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-initial-avatar
pnpm add react-initial-avatar
yarn add react-initial-avatar
bun add react-initial-avatar
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2024-03-09 |
| First published | 2023-09-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 74.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Afzal Ali |
| Maintainers | afzalali |
| Keywords | avatar, react-initials-avatar, react-initial-avatar, initials-avatar |

## Links

- npm: https://www.npmjs.com/package/react-initial-avatar
- Repository: https://github.com/afzalali27/react-initial-avatar
- Homepage: https://github.com/afzalali27/react-initial-avatar#readme
- Issues: https://github.com/afzalali27/react-initial-avatar/issues
- npm.io page: https://npm.io/package/react-initial-avatar

## Alternatives

- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads

## Recent versions

- 1.1.0 (latest) — 2024-03-09
- 1.0.3 — 2023-09-24
- 1.0.2 — 2023-09-17
- 1.0.1 — 2023-09-17
- 1.0.0 — 2023-09-17

## README

# React Initials Avatar

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

## Installation

```bash
npm install react-initial-avatar
```
## Usage

```jsx
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
```jsx
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](https://github.com/afzalali27)

---
_Source: https://npm.io/package/react-initial-avatar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._