Skip to content
react component to make Gmail like text avatars for profile pictures
JavaScript
Branch: master
Clone or download
brunocarvalhodearaujo Merge pull request #2 from brunocarvalhodearaujo/dependabot/npm_and_y…
…arn/mixin-deep-1.3.2

Bump mixin-deep from 1.3.1 to 1.3.2
Latest commit 5c22481 Dec 28, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__test__
src
.babelrc
.editorconfig
.flowconfig
.gitignore
.npmignore
LICENSE add license and badges Dec 17, 2017
README.md
index.d.ts
package-lock.json Merge pull request #2 from brunocarvalhodearaujo/dependabot/npm_and_y… Dec 28, 2019
package.json

README.md

React Initial

npm version License Dependency Status devDependency Status npm

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

example

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

References to create project

You can’t perform that action at this time.