react-initial's Introduction

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

react-initial's People

Contributors

Stargazers

Watchers

react-initial's Issues

⚠️ Greenkeeper is no longer available for new installations

Hello!

Greenkeeper is no longer available for new installations.

The service will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020. Find out more at greenkeeper.io.

If this is your only Greenkeeper installation, you can just sign up for Snyk directly, it’s free for Open Source even has free features for private projects as well.

Nevertheless, thanks for your interest in Greenkeeper! We’re sure your repositories will find a good home at Snyk ☀️🏡💜

All the best from everyone at Greenkeeper! 👋🤖🌴

Does not use second name

When the name is fed a first and second (last) name, and the charCount is set to 2, the first two letters of the first name are used. That is not what one normally considers to be the initials.

Recommend Projects