# @lightm-nft/multi-layer-2d-renderer

Latest version **0.1.0-alpha.4** (published 2023-06-08) · GPL-3.0-or-later license · 0 weekly downloads

## Install

```sh
npm install @lightm-nft/multi-layer-2d-renderer
pnpm add @lightm-nft/multi-layer-2d-renderer
yarn add @lightm-nft/multi-layer-2d-renderer
bun add @lightm-nft/multi-layer-2d-renderer
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0-alpha.4 |
| Published | 2023-06-08 |
| First published | 2023-06-06 |
| Weekly downloads | 0 |
| License | GPL-3.0-or-later |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 16 |
| Unpacked size | 2.7 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | lightm-nft |

## Links

- npm: https://www.npmjs.com/package/@lightm-nft/multi-layer-2d-renderer
- Repository: https://github.com/LightmNFT/multi-layer-2d-renderer
- Homepage: https://github.com/LightmNFT/multi-layer-2d-renderer#readme
- Issues: https://github.com/LightmNFT/multi-layer-2d-renderer/issues
- npm.io page: https://npm.io/package/@lightm-nft/multi-layer-2d-renderer

## Dependencies (16)

- [zod](https://npm.io/package/zod.md) ^3.21.4
- [clsx](https://npm.io/package/clsx.md) ^1.2.1
- [react](https://npm.io/package/react.md) ^18.2.0
- [pixi.js](https://npm.io/package/pixi.js.md) ^7.2.4
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [use-image](https://npm.io/package/use-image.md) ^1.1.0
- [@pixi/react](https://npm.io/package/@pixi/react.md) ^7.1.0
- [lucide-react](https://npm.io/package/lucide-react.md) ^0.236.0
- [tailwind-merge](https://npm.io/package/tailwind-merge.md) ^1.13.0
- [react-hook-form](https://npm.io/package/react-hook-form.md) ^7.44.3
- [@hookform/resolvers](https://npm.io/package/@hookform/resolvers.md) ^3.1.0
- [@radix-ui/react-slot](https://npm.io/package/@radix-ui/react-slot.md) ^1.0.2
- [@radix-ui/react-label](https://npm.io/package/@radix-ui/react-label.md) ^2.0.2
- [@radix-ui/react-switch](https://npm.io/package/@radix-ui/react-switch.md) ^1.0.3
- [class-variance-authority](https://npm.io/package/class-variance-authority.md) ^0.6.0
- [@radix-ui/react-accordion](https://npm.io/package/@radix-ui/react-accordion.md) ^1.1.2

## Recent versions

- 0.1.0-alpha.4 (latest) — 2023-06-08
- 0.1.0-alpha.3 — 2023-06-07
- 0.1.0-alpha.1 — 2023-06-07
- 0.1.0-alpha.0 — 2023-06-06

## README

<p align="center">
  <a href="https://lightm.xyz" target="_blank" rel="noopener noreferrer">
    <img width="180" height="180" src="/public/Lightm.png" alt="Lightm Logo" />
  </a>
</p>

# @lightm-nft/multi-layer-2d-renderer

[![npm version](https://img.shields.io/npm/v/@lightm-nft/multi-layer-2d-renderer.svg?style=flat)](https://www.npmjs.com/package/@lightm-nft/multi-layer-2d-renderer)

This component is used for rendering multi-layer 2d textures.

For details, check the comment in the code below.

```ts
interface IResource {
  // uri of resource, supports `http(s)://` & `ipfs://`
  src: string;

  // layer priority, the larger the value, the higher the priority.
  // `[{ z: 1, children: [{ z: 1 }, { z: 2 }] }, { z: 2 }]`
  // | layer
  // | ----- 2
  // |  ---  1-2
  // |  ---  1-1
  // | ----- 1

  // if a tuple is passed, then the 1st is the priority of current layer, and the 2nd will indicates its children resources will not be rendered in its own layer, but rendered in the specified layer which has the same rendering context with it.
  // `[{ z: [1, 3], children: [{ z: 1 }]}, { z: 2 }]`
  // | layer
  // |  ---  3-1
  // | ----- 3
  // | ----- 2
  // | ----- 1

  // NOTE there's a special value INHERIT_RENDER_CONTEXT which indicates that children can directly get into the same context with current resource, so this will look like the children resources become completely independent resources.
  // `[{ z: [1, INHERIT_RENDER_CONTEXT], children: [{ z: 1 }, { z: 3 }]}, { z: 2 }]`
  // | layer
  // | ----- 3
  // | ----- 2
  // | ----- 1 | ----- 1
  z: number | [number, number | typeof INHERIT_RENDER_CONTEXT];
  resources?: IResource[];
}

interface IMultiLayer2DRenderer {
  resources: IResource[];
  customLoadingComponent?: React.ReactNode;
  className?: string;
  style?: CSSProperties;
}
```

## DEMO

Check https://lightm-multi-layer-2d-renderer.netlify.app/ to try it

---
_Source: https://npm.io/package/@lightm-nft/multi-layer-2d-renderer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._