Extended-bigheads NPM

About

Did you ever want to create a Big Head version of your self? Or do you want to offer users an easy creation of avatars for your application? Here you go! 🚀\ This projects extends the Original Big Heads implementation with features of the React Native Big Heads implementation and the Vue Big Heads implementation, giving it a rich set of options to style your Big Head Avatar.

Try it

Getting Started

npm i extended-bigheads

import { BigHead } from "extended-bigheads";
// or
const { BigHead } = require("extended-bigheads");

then, in your app:

import { BigHead } from "extended-bigheads";
// or const { BigHead } = require("extended-bigheads");

const Example = () => (
  <BigHead
    showBackground={true}
    backgroundColor="blue"
    backgroundShape="square"
    accessory="shades"
    body="chest"
    clothing="tankTop"
    clothingColor="red"
    eyebrows="angry"
    eyes="wink"
    facialHair="mediumBeard"
    facialHairColor="blonde"
    graphic="vue"
    hair="short"
    hairColor="black"
    hat="none"
    hatColor="green"
    lashes={false}
    lipColor="purple"
    mouth="open"
    skinTone="brown"
    faceMask={true}
    faceMaskColor="blue"
  />
);

To retrieve an object with all options possible, use

import { bigHeadOptions } from "extended-bigheads";
// or
const { bigHeadOptions } = require("extended-bigheads");

bigHeadOptions will look like this:

{
  accessory: ['none', 'roundGlasses', 'tinyGlasses', ...],
  backgroundColor: ['red', 'orange', 'yellow', ...],
  backgroundShape: ['circle', 'square', 'squircle'],
  ...
}

Props

Leaving a prop empty will result in a random value being chosen. | Property | Possible values | | ------------------ | -------------------------- | | showBackground | true , false | | backgroundColor | 'red' , 'orange' , 'yellow' , 'green' , 'turqoise' , 'blue' , 'pink' , 'purple' | | backgroundShape | 'none' , 'circle' , 'square' , 'squircle' | | accessory | 'none' , 'faceMask' , 'hoopEarrings' , 'roundGlasses' , 'shades' , 'tinyGlasses' | | body | 'chest' , 'breasts' | | clothing | 'naked' , 'chequeredShirt' , 'chequeredShirtDark' , 'shirt' , 'denimJacket' , 'dressShirt' , 'hoodie' , 'vneck' , 'tankTop' , 'dress' | | clothingColor | 'white' , 'gray' , 'black' , 'red' , 'lightRed' , 'orange' , 'lightOrange' , 'yellow' , 'lightYellow' , 'green' , 'lightGreen' , 'turqoise' , 'lightTurqoise' , 'blue' , 'lightBlue' , 'pink' , 'lightPink' , 'purple' , 'lighPurple' | | eyebrows | 'none' , 'angry' , 'concerned' , 'leftLowered' , 'raised' , 'serious' | | eyes | 'normal' , 'content' , 'crazy' , 'cute' , 'cyborg' , 'dizzy' , 'dollars' , 'eyePatch' , 'eyePatch2' , 'happy' , 'hearts' , 'leftTwitch' , 'squint' , 'simple' , 'stars' , 'wink' | | facialHair | 'none' , 'goatee' , 'mediumBeard' , 'stubble' | | facialHairColor | 'white' , 'silver' , 'blonde' , 'brown' , 'black' , 'red' , 'lightRed' , 'orange' , 'lightOrange' , 'green' , 'lightGreen' , 'turqoise' , 'lightTurqoise' , 'blue' , 'lightBlue' , 'pink' , 'lightPink' , 'purple' , 'lighPurple' | | graphic | 'none' , 'donut' , 'gatsby' , 'graphQL' , 'rainbow' , 'react' , 'redwood' , 'vue' | | hair | 'none' , 'afro' , 'balding' , 'bob' , 'bun' , 'buzz' , 'long' , 'mohawk' , 'pixie' , 'short' | | hairColor | 'white' , 'silver' , 'blonde' , 'brown' , 'black' , 'red' , 'lightRed' , 'orange' , 'lightOrange' , 'green' , 'lightGreen' , 'turqoise' , 'lightTurqoise' , 'blue' , 'lightBlue' , 'pink' , 'lightPink' , 'purple' , 'lighPurple' | | hat | 'none ', 'beanie' , 'hijab' , 'partyHat' , 'turban' | | hatColor | 'white' , 'gray' , 'black' , 'red' , 'lightRed' , 'orange' , 'lightOrange' , 'yellow' , 'lightYellow' , 'green' , 'lightGreen' , 'turqoise' , 'lightTurqoise' , 'blue' , 'lightBlue' , 'pink' , 'lightPink' , 'purple' , 'lighPurple' | | lashes | true , false | | lipColor | 'red' , 'lightRed' , 'green' , 'lightGreen' , 'turqoise' , 'lightTurqoise' , 'blue' , 'lightBlue' , 'pink' , 'lightPink' , 'purple' , 'lightPurple' | | mouth | 'grin' , 'lips' , 'open' , 'openSmile' , 'piercedTongue' , 'sad' , 'serious' , 'tongue' , 'vomitingRainbow' | | skinTone | 'light' , 'yellow' , 'brown' , 'dark' , 'red' , 'black' | | faceMask | true , false | | faceMaskColor | 'white' , 'gray' , 'black' , 'red' , 'lightRed' , 'orange' , 'lightOrange' , 'yellow' , 'lightYellow' , 'green' , 'lightGreen' , 'turqoise' , 'lightTurqoise' , 'blue' , 'lightBlue' , 'pink' , 'lightPink' , 'purple' , 'lighPurple' |

Authors

Some portions of this code belong to the bigheads authors which are distributed under the MIT License
Some portions of this code belong to the react-native-bigheads authors which are distributed under the MIT License
Some portions of this code belong to the vue-bigheads authors which are distributed under the MIT License
Robert Linde