react-peeps

React implementation of the hand drawn illustration library called Open Peeps

Installation

npm install react-peeps

Web generator available at https://www.opeeps.fun

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import Peep from 'react-peeps';

const styles = {
	peepStyle: {
		width: 300,
		height: 300,
		justifyContent: 'center',
		alignSelf: 'center'
	},
	circleStyle: {
		backgroundColor: '#F3D34A',
		width: 270,
		height: 270,
		alignSelf: 'center',
		borderRadius: 135,
		overflow: 'hidden',
		borderWidth: 3,
		borderColor: 'black',
		borderStyle: 'solid'
	},
	showcaseWrapper: {
		display: 'flex',
		justifyContent: 'center',
		height: '-webkit-fill-available'
	}
};

const Showcase: React.FC = () => {
  return (
    <div style={styles.showcaseWrapper}>
      <Peep
        style={styles.peepStyle}
        accessory='GlassRoundThick'
        body='Shirt'
        face='Cute'
        hair='ShortVolumed'
        facialHair='Dali'
        strokeColor='#e6e6e6'
        backgroundColor='red'
      />

      <Peep
        style={styles.peepStyle}
        circleStyle={styles.circleStyle}
        accessory='GlassRoundThick'
        body='Shirt'
        face='Cute'
        hair='ShortVolumed'
        facialHair='Dali'
        strokeColor='#e6e6e6'
        viewBox={{ x: '0', y: '0', width: '1050', height: '1200' }}
      />

      <Peep
        style={{...styles.peepStyle, transform: 'scale(-1, 1)'}}
        accessory='GlassRoundThick'
        body='Shirt'
        face='Cute'
        hair='ShortVolumed'
        facialHair='Dali'
        strokeColor={{degree: 300, firstColor: '#2E8A57', secondColor: '#81087F'}}
      />
    </div>
  );
};

ReactDOM.render(<Showcase />, document.getElementById('main'));

Props

Attribute	Type	Description	Required
accessory	string	Defines the picked accessory piece name	No
body	string	Defines the picked body type	No
face	string	Defines the picked face expression name	No
facialHair	string	Defines the picked facial hair type	No
hair	string	Defines the picked hair type	No
style	CSSProperties	Style of the SVG element	No
circleStyle	CSSProperties	Wraps the SVG into a div element and passes style to that div	No
strokeColor	string | GradientType	Defines the stroke color of lines	No
backgroundColor	string | GradientType	Defines the background color of the peep's pieces	No
wrapperBackground	string | GradientType	Defines the background of SVG	No
viewBox	{ x: string; y: string; width: string; height: string; }	Defines the viewable dimensions of the SVG	No

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Thanks 🙌

License

MIT