# react-string-avatar

> React String Avatar is a simple React component that generates a letter's avatar like Microsoft or Google do in their web apps. First letter of each word in a string or a group of initials will be used to generate the avatar. The image of the avatar will

Latest version **1.2.2** (published 2020-01-08) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2020-01-08 |
| First published | 2018-07-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 28 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | asr |
| Maintainers | ajsoriar |
| Keywords | avatar, react-string-avatar, react string avatar, react-avatar, react avatar, string-avatar, string avatar, js-avatar, js avatar |

## Links

- npm: https://www.npmjs.com/package/react-string-avatar
- Repository: https://github.com/ajsoriar/react-string-avatar
- Homepage: https://github.com/ajsoriar/react-string-avatar#readme
- Issues: https://github.com/ajsoriar/react-string-avatar/issues
- npm.io page: https://npm.io/package/react-string-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.2.2 (latest) — 2020-01-08
- 1.2.0 — 2020-01-07
- 1.1.1 — 2019-12-31
- 1.1.0 — 2019-12-30
- 1.0.2 — 2018-08-26
- 1.0.1 — 2018-08-26
- 0.0.4 — 2018-08-07
- 0.0.31 — 2018-07-20
- 0.0.3 — 2018-07-19
- 0.0.2 — 2018-07-18

## README

# react-string-avatar [![Build Status](https://travis-ci.org/ajsoriar/angular-avatar.svg?branch=master)](https://travis-ci.org/ajsoriar/react-string-avatar)

[![npm version](https://badge.fury.io/js/react-string-avatar.svg)](https://badge.fury.io/js/react-string-avatar)
<!-- [![NuGet version](https://badge.fury.io/nu/react-string-avatar.svg)](https://badge.fury.io/nu/react-string-avatar) -->

[![NPM](https://nodei.co/npm/react-string-avatar.png?downloads=true&stars=true)](https://nodei.co/npm/react-string-avatar/)

React String Avatar is an ES6 module/component for React that generates a letter's avatar like Microsoft or Google do in their web apps. First letter of each word in a string or a group of initials will be used to generate the avatar. The image of the avatar will be rendered in an html img tag as a real png or jpeg. The image data can be retrieved using javascript to be stored in back-end giving you an initial profile picture in your web or mobile apps when the user does not upload one. Several React props are available to configure the output: size, shape, resolution, colors, etc.

![react-string-avatar auto-color feature examples](./demo/react-string-avatar-autocolor-example.png?raw=true "react-string-avatar auto-color feature examples")

**Live** example here: **<https://www.subidote.com/react-string-avatar/?path=/story/avatar--my-avatar-1>**

## Quick start

### 1 Download and Install react-string-avatar

From **npm**

```bash
npm install react-string-avatar --save
```

or **yarn**

```bash
yarn add react-string-avatar --save
```

Source in github: **<https://github.com/ajsoriar/react-string-avatar>**

### 2 Import Custom Element

```javascript
import Avatar from 'react-string-avatar';
```

### 3 Use it this way

```javascript
<Avatar initials="A"></Avatar>
```

You will get this:<br/>
![react-string-avatar basic usage example](./demo/react-string-avatar-basic-example.png?raw=true "react-string-avatar basic usage example")

#### 3.1 More usage examples ready to copy and paste

```javascript
<Avatar initials="A" />
<Avatar initials="AS" bgColor="#00FF00" />
<Avatar initials="AJS" bgColor="cyan" textColor="blue" roundShape="true" ></Avatar>
<Avatar initials="AJ" bgColor="red" textColor="yellow" pictureResolution={512} width={64} />
<Avatar initials="AJ" bgColor="yellow" textColor="green" pictureResolution={1024} width={32} />
<Avatar initials="AS" bgColor="lightgreen" textColor="red" pictureResolution={16} width={128} pixelated={false} />
<Avatar initials="AS" bgColor="#99f499" textColor="red" pictureResolution={16} width={128} pixelated />
<Avatar initials="AS" roundShape bgColor="#a8ff2c" textColor="black" pictureResolution={512} width={42} pixelated={false} class="adres-css" wrapperStyle={{ border: '4px solid red' }} wrapper />
<Avatar initials="123" roundShape string="  andres     jose   soria " bgColor="orange" textColor="#FFF" pictureResolution={256} width={64} pixelated={false} class="adres-css" wrapperStyle={{ border: '4px solid red' }} />
<Avatar roundShape bgColor="#36adf2" textColor="white" pictureResolution={256} width={56} pixelated={false} class="adres-css" wrapperStyle={{ border: '2px solid blue' }} />
<Avatar initials="CM" cornerRadius={7} bgColor="#3875d7" />
<Avatar initials="jpg" pictureFormat="jpeg" bgColor="red" textColor="yellow" width={64} cornerRadius={5} />
<Avatar initials="png" pictureFormat="png" bgColor="purple" textColor="yellow" width={64} cornerRadius={5} />
```

You will get this:

![More reacr-string-avatar basic usage examples](./demo/react-string-avatar-examples.png?raw=true "More reacr-string-avatar basic usage examples")

<!-- Run the live example in plunker: <http://plnkr.co/edit/TfCxUn?p=preview> -->

#### 3.2 Auto-color feature

```javascript
<Avatar string="Foo Bar" autoColor={true} />
```

### 4 Development

Clone this repository, install dependencies and launch storybook.

```bash
git clone https://github.com/ajsoriar/react-string-avatar.git

yarn install

yarn storybook

yarn build
```

### 5 License

react-string-avatar is [MIT licensed](./LICENSE).

**Free Software, Yeah!**

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