https://github.com/brunocarvalhodearaujo/react-initial

react component to make Gmail like text avatars for profile pictures
https://github.com/brunocarvalhodearaujo/react-initial

avatar initial react

Last synced: 2 months ago
JSON representation

react component to make Gmail like text avatars for profile pictures

• Host: GitHub
• URL: https://github.com/brunocarvalhodearaujo/react-initial
• Owner: brunocarvalhodearaujo
• License: mit
• Created: 2017-12-13T16:04:46.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-07-18T21:09:06.000Z (over 1 year ago)
• Last Synced: 2024-10-04T00:17:54.227Z (3 months ago)
• Topics: avatar, initial, react
• Language: JavaScript
• Homepage: https://brunocarvalhodearaujo.github.io/react-initial/
• Size: 2.99 MB
• Stars: 5
• Watchers: 2
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  



React Initial

Simple react component to make Gmail like text avatars for profile pictures.


[![npm version](https://badge.fury.io/js/react-initial.svg)](http://badge.fury.io/js/react-initial)

[![License](https://img.shields.io/npm/l/react-initial.svg)](https://www.npmjs.com/package/react-initial) 

[![npm](https://img.shields.io/npm/dt/react-initial.svg)]()

## Usage

```js

import React, { Component } from 'react'

import { Initial } from 'react-initial'

export default class MyComponent extends Component {

  render () {

    return (

      

    )

  }

}

```

## Props

The `Initial` component takes a couple of props that you can use to customize its behaviour:

| **Name**     |**Type**| **Description**                                                 |**Default**|

|--------------|--------|-----------------------------------------------------------------|-----------|

| `name`       | string | Name of the user which the profile picture should be generated  | Name      |

| `height`     | number | Height of the picture                                           | 100       |

| `width`      | number | Width of the picture                                            | 100       |

| `charCount`  | number | Number of characherts to be shown in the picture.               | 1         |

| `textColor`  | string | Color of the text                                               | #ffffff   |

| `fontSize`   | number | Font size of the character(s)                                   | 60        |

| `fontWeight` | number | Font weight of the character(s)                                 | 400       |

| `radius`     | number | Rounded corners                                                 | 0         |

| `seed`       | number | Number to randomize the background color                        | 0         |

| `color`      | string | Background color of the profile picture that should be generated| null      |

| `useWords`   | boolean | number of characters while splitting the words over spaces     | null      |

## Compatibility

- Chrome

- Firefox

- Opera 9+

- Safari 3.2+

- iOS Safari 3.2+

- Android Browser 3+

## References to create project

- [initial.js](https://github.com/judesfernando/initial.js)

- [Creating TypeScript typings for existing React components](https://templecoding.com/blog/2016/03/31/creating-typescript-typings-for-existing-react-components/)