https://github.com/ceamkrier/react-peeps
React implementation of the Open Peeps
https://github.com/ceamkrier/react-peeps
avatar-generator open-peeps react
Last synced: 5 months ago
JSON representation
React implementation of the Open Peeps
- Host: GitHub
- URL: https://github.com/ceamkrier/react-peeps
- Owner: CeamKrier
- License: mit
- Created: 2020-03-05T17:35:48.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-05T00:40:18.000Z (over 2 years ago)
- Last Synced: 2024-10-30T01:34:47.495Z (over 1 year ago)
- Topics: avatar-generator, open-peeps, react
- Language: TypeScript
- Homepage: https://www.opeeps.fun
- Size: 3.47 MB
- Stars: 58
- Watchers: 4
- Forks: 10
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-peeps
React implementation of the hand drawn illustration library called [Open Peeps](https://www.openpeeps.com/)
## Installation
```
npm install react-peeps
```
[](https://codesandbox.io/s/react-peeps-playground-mbtlj?fontsize=14&hidenavigation=1&theme=dark)
Web generator available at https://www.opeeps.fun
## Usage
```javascript
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 (
);
};
ReactDOM.render(, 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 :raised_hands:
## License
[MIT](<[https://choosealicense.com/licenses/mit/](https://choosealicense.com/licenses/mit/)>)