React Initial

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

Usage

import React, { Component } from 'react'
import { Initial } from 'react-initial'
 
export default class MyComponent extends Component {
  render () {
    return (
      <Initial
        name='Bruno Carvalho de Araujo'
      />
    )
  }
}

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
• Creating TypeScript typings for existing React components