React component for Bottts

The core React component for Bottts Generator developed by Mack Etherington, based on the Sketch library Bottts designed by Pablo Stanley. Forked and adapted from Fang-Pen Lin's Avataaars.

Features

• SVG based
• Light weight
• Scalable
• Easy to use
• Easy to integrate with custom editor
• Comes with official editor

Usage

First, you need to install the bottts component package, here you run

yarn add bottts

or

npm install bottts --save

if you are using npm. Then, in your React app, import the Bottt component and put it where you like it to be, for example

import * as React from 'react'
import Bot from 'bottts'

export default class MyComponent extends React.Component {
  render () {
    return 
      <div>
        Your bot:
        <Bot
          style={{width: '100px', height: '100px'}}
          botStyle='Circle'
          circleColor='BlueGrey300'
          topType='Bulb02'
          topColor='BlueGrey500'
          faceType='Square01'
          faceColor='BlueGrey500'
          textureType='Camo01'
          eyeType='Round'
          mouthType='Square01'
          sideType='Square'
          sidesColor='BlueGrey500'
        />
      </div>
  }
}

To showcase individual pieces of the bot you can use the Piece component, for example:

import * as React from 'react'
import {Piece} from 'bottts';

export default class MyComponent extends React.Component {
  render () {
    return 
      <div>
        <Piece botStyle='Circle' pieceType="top" pieceSize="100" topType="Bulb02" topColor="BlueGrey500"/>
        <Piece botStyle='Circle' pieceType="face" pieceSize="100" faceType="Square01" faceColor="BlueGrey500" textureType="Camo01"/>
        <Piece botStyle='Circle' pieceType="eye" pieceSize="100" eyeType="Round"/>
        <Piece botStyle='Circle' pieceType="mouth" pieceSize="100" mouthType="Square01"/>
        <Piece botStyle='Circle' pieceType="sides" pieceSize="100" sidesType="Square" sidesColor="BlueGrey500"/>
      </div>
  }
}

To explore bot options and generate the React code, please use Bottts Generator

Collect options

To build your own avatar editor, you may want to use lower level Bot component along with OptionContext. For more details usage, please reference to source code of bottts-generator, see how it uses OptionContext to collection available options.