React Initial
Simple react component to make Gmail like text avatars for profile pictures.
Browser compatibility
- Chrome
- Firefox
- Opera 9+
- Safari 3.2+
- iOS Safari 3.2+
- Android Browser 3+
Usage
import React from 'react'
import ReactDOM from 'react-dom'
import { Initial } from 'react-initial'
const App = () => (
<Initial name='Bruno Carvalho de Araujo' />
)
ReactDOM.render(<App />, document.getElementById('root'))Props
The Initial component takes a couple of props that you can use to customize its behaviour:
| Prop | 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 |