# react-robohash

> A react component for robohash.org

Latest version **1.0.9** (published 2019-09-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-robohash
pnpm add react-robohash
yarn add react-robohash
bun add react-robohash
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2019-09-11 |
| First published | 2019-02-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Felix Wostal |
| Maintainers | felixwostal |
| Keywords | react, robohash, react-robohash |

## Links

- npm: https://www.npmjs.com/package/react-robohash
- Homepage: https://github.com/fel1xw/react-robohash#readme
- Issues: https://github.com/fel1xw/react-robohash/issues
- npm.io page: https://npm.io/package/react-robohash

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.9 (latest) — 2019-09-11
- 1.0.8 — 2019-02-26
- 1.0.7 — 2019-02-26
- 1.0.6 — 2019-02-26
- 1.0.5 — 2019-02-26
- 1.0.4 — 2019-02-25
- 1.0.3 — 2019-02-25
- 1.0.2 — 2019-02-25
- 1.0.1 — 2019-02-25
- 1.0.0 — 2019-02-25

## README

![logo](https://i.ibb.co/j6CkJV4/react-robohash.png)

[![npm version](https://badge.fury.io/js/react-robohash.svg)](https://badge.fury.io/js/react-robohash)
[![Build Status](https://travis-ci.org/fel1xw/react-robohash.svg?branch=master)](https://travis-ci.org/fel1xw/react-robohash)
[![Blazing Fast](https://badgen.now.sh/badge/speed/blazing%20%F0%9F%94%A5/green)](https://npm.im/react-robohash)
[![Coverage Status](https://coveralls.io/repos/github/fel1xw/react-robohash/badge.svg?branch=master)](https://coveralls.io/github/fel1xw/react-robohash?branch=master)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![gzip size](http://img.badgesize.io/https://unpkg.com/react-robohash@latest/dist/index.js?compression=gzip)](https://unpkg.com/react-robohash@latest/dist/index.js)
[![Known Vulnerabilities](https://snyk.io/test/github/fel1xw/react-robohash/badge.svg)](https://snyk.io/test/github/fel1xw/react-robohash)

## Install
```sh
npm install react-robohash --save
# or
yarn add react-robohash
```

## Playground
You can play around with the module on [codesandbox](https://codesandbox.io/s/zrpz3jpzp?fontsize=14)

## Props
| Name        | Type            | Required | Default            | Description                                                                 |
|-------------|-----------------|----------|--------------------|-----------------------------------------------------------------------------|
| name        | string          | true     |                    | name, email, whatever identifier you want                                   |
| alt         | string          | false    | `Robohash-${name}` | alt property for image                                                      |
| className   | string          | false    | Robohash           | pass custom class                                                           |
| size        | string | number | false    |                    | specify image size like 200 or 100x50 (square works best)                   |
| type        | string | number | false    | robot              | type - "robot", "alien", "head", "cat", 1, 2, 3, 4                          |
| background  | string          | false    | 0                  | custom background set (1, 2)                                                |
| fileType    | string          | false    | png                | image return type, png, svg, jpg (see homepage)                             |
| gravatar    | boolean         | false    | false              | checks if gravatar is available otherwise fallbacks to robot                |
| children    | function        | false    |                    | custom render prop function which gets only the url passed in (see example) |

## Usage
```
import Robohash from 'react-robohash';

<Robohash
  name="foxy"
  type="cat"
/>
```

or with custom element as render prop function
```
import Robohash from 'react-robohash';

<Robohash name="react-robohash">
  {url => <span>{url}</span>}
</Robohash>
```

## Author
* Felix Wostal [@felixwostal](https://twitter.com/felixwostal)

## Support
If you like the project and want to support my work, you can think about buy me a coffee :)

[![paypal](https://img.shields.io/badge/donate-paypal-blue.svg)](https://paypal.me/felixwostal/1)

---
_Source: https://npm.io/package/react-robohash · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._