Notable Pottery Manufacturer

    react-peeps
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.10 • Public • Published

    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

    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

    Install

    npm i react-peeps

    DownloadsWeekly Downloads

    1

    Version

    0.1.10

    License

    MIT

    Unpacked Size

    2.3 MB

    Total Files

    578

    Last publish

    Collaborators

    • ceamkrier