# hashicon-react-native

> React Native Hashicon - React Native component for a visual representation of a hash value, as a hexagon

Latest version **0.0.7** (published 2021-06-13) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install hashicon-react-native
pnpm add hashicon-react-native
yarn add hashicon-react-native
bun add hashicon-react-native
```

## Health

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

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

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2021-06-13 |
| First published | 2021-06-12 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=8 |
| Dependencies | 3 |
| Unpacked size | 5.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Igor Artamonov |
| Maintainers | stunnedlemur |
| Keywords | hash, icon, avatar, identicon, generate, generator, visual, canvas |

## Links

- npm: https://www.npmjs.com/package/hashicon-react-native
- Repository: https://github.com/reginaliuyx/react-native-hashicon
- npm.io page: https://npm.io/package/hashicon-react-native

## Dependencies (3)

- [react](https://npm.io/package/react.md) 16.13.1
- [react-native](https://npm.io/package/react-native.md) 0.63.2
- [@emeraldpay/hashicon](https://npm.io/package/@emeraldpay/hashicon.md) ^0.5.1

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [stockfish](https://npm.io/package/stockfish.md) — 27.0K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads

## Recent versions

- 0.0.7 (latest) — 2021-06-13
- 0.0.6 — 2021-06-13
- 0.0.5 — 2021-06-13
- 0.0.4 — 2021-06-13
- 0.0.3 — 2021-06-12
- 0.0.2 — 2021-06-12
- 0.0.1 — 2021-06-12

## README

React Native Hashicon
==============
> Generates a beautiful representation of any string value.

The React Native implementation of [Hashicon](https://www.npmjs.com/package/@emeraldpay/hashicon) by [@emeraldpay](https://github.com/emeraldpay).

Install with: 
```shell
$ npm install react-native-hashicon --save
```   

And use the component:

```js
import { Hashicon } from 'react-native-hashicon';

// something that you want to represent visually. For example ID of an object on the screen.
const value = "9dddff8f-be81-4c27-80c8-099327865f3f";

// Example of a Hashicon
<Hashicon value={value}/>

// Same icon with 80px in size
<Hashicon value={value} size={89}/>
```

Params
---
> See [default params](src/params.ts)

HashIcon's values are extracted from the hash, and controlled with the following parameters to manipulate the possible visual output:

```js
{

// size px (HiDPI/Retina aware)
size: 100,

// primary color range radius ( 0=red, 60=yellow, 120=green, ..., 360=red )
hue: { min: 0, max: 360 },

// saturation ( 0=grey, 100=colorfull )
saturation: { min: 70, max: 100 },

// lightness ( 0=extremlydark, 50=optimal, 100=extremlybright )
lightness: { min: 45, max: 65 },

// hue variation for individual triangles
variation: { min: 7, max: 14, enabled: true },

// color shift from primary hue to secondary hue ( the pattern )
shift: { min: 60, max: 300 },

// the pattern opacity
figurealpha: { min: .7, max: 1.2 }, // alpha

// simulate a 3d cube by different areas gets some more/less light applyed 
light:{ top:10, right:-8, left:-4, enabled: true},

// Allows a custom canvas to be used to render into
createCanvas: (width, height) => HTMLCanvasElement

}
```

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