# @zoralabs/zorb

> This is the web-based Zorb renderer component

Latest version **0.1.0** (published 2022-02-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @zoralabs/zorb
pnpm add @zoralabs/zorb
yarn add @zoralabs/zorb
bun add @zoralabs/zorb
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2022-02-09 |
| First published | 2022-01-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 205.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | kulk, zerostyle, kolber, steev27, ismallcombe, mrdain, tbtstl, daihovey, brecknrdg, zethan, j-s, nguyensomniac, olegakbarov, bjfresh, jgeary, iainnash, zacgoods, mattlenz |

## Links

- npm: https://www.npmjs.com/package/@zoralabs/zorb
- npm.io page: https://npm.io/package/@zoralabs/zorb

## Dependencies (3)

- [tinycolor2](https://npm.io/package/tinycolor2.md) ^1.4.2
- [@types/tinycolor2](https://npm.io/package/@types/tinycolor2.md) ^1.4.3
- [@ethersproject/bytes](https://npm.io/package/@ethersproject/bytes.md) ^5.5.0

## Recent versions

- 0.1.0 (latest) — 2022-02-09
- 0.0.2 — 2022-01-04
- 0.0.1 — 2022-01-04

## README

# Zorb Renderer for Web

This is the web-based Zorb renderer component

#### Use Zora Zorb without any web frameworks:

```html
<!-- insert in head or footer of page -->
<script src="https://unpkg.com/@zoralabs/zorb@^0.0/dist/zorb-web-component.umd.js"></script>

<!-- add a zora-zorb tag anywhere you want to render a zorb -->
<zora-zorb address="0xf7b2c2eb58a5f801119df7e9bf9f9b66c62bb011"></zora-zorb>
```

----

### Use Zora Zorb with react with a web component:

Full example: https://codesandbox.io/s/zorb-demo-v1js7

```js
import '@zoralabs/zorb';

export const Zorb = ({address}: {address: string}) => (
  return <zora-zorb address={address}></zora-zorb>
);
```


### Use Zora Zorb with react in an image tag:

```js
import {useMemo} from 'react';
import {zorbImageDataURI} from '@zoralabs/zorb';

export const Zorb = ({address}: {address: string}) => (
  const zorbImage = useMemo(() => zorbImageDataURI(address), [address]);
  return <img src={zorbImage} />
);
```

----

### Use with a vanilla.js, vue, or other project in ES6

1. Import Zora-Zorbs

```js
import '@zoralabs/zorb';
```

2. Render Zora Zorb

```js
<zora-zorb address="0x18C8dF1fb7FB44549F90d1C2BB1DC8b690CD0559"></zora-zorb>
```

```js
<<<<<<< HEAD
<zora-zorb address="0x7a6f726121030cadf9923333d5b6f29277024027" size="200px"></zora-zorb>
```

---- 

#### Notes:

Web components are not self-closing and need a closing tag. Any text between the two tags will be used as alt text.
Leaving the alt text blank (tags empty) is fine since this is a presentational element that is not crucial to understanding the page.

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