Bottts NPM | npm.io

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

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.