rp
react-peeps
npm i react-peeps
rp

react-peeps

React implementation of the Open Peeps

by Emre Çakır

0.1.10 (see all)License:MITTypeScript:Built-In
npm i react-peeps
Readme

react-peeps

React implementation of the hand drawn illustration library called Open Peeps

peeps example

Installation

npm install react-peeps

Edit react-peeps-playground

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

AttributeTypeDescriptionRequired
accessorystringDefines the picked accessory piece nameNo
bodystringDefines the picked body typeNo
facestringDefines the picked face expression nameNo
facialHairstringDefines the picked facial hair typeNo
hairstringDefines the picked hair typeNo
styleCSSPropertiesStyle of the SVG elementNo
circleStyleCSSPropertiesWraps the SVG into a div element and passes style to that divNo
strokeColorstring | GradientTypeDefines the stroke color of linesNo
backgroundColorstring | GradientTypeDefines the background color of the peep's piecesNo
wrapperBackgroundstring | GradientTypeDefines the background of SVGNo
viewBox{ x: string; y: string; width: string; height: string; }Defines the viewable dimensions of the SVGNo

Contributing

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

Thanks 🙌

License

MIT

Downloads/wk

2

GitHub Stars

40

LAST COMMIT

2mos ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

0

OPEN PRs

2
VersionTagPublished
0.1.10
latest
1yr ago
No alternatives found
No tutorials found
Add a tutorial