# react-ag-psd-psdtool

[![npm package][npm-img]][npm-url]
[![Build Status][build-img]][build-url]
[![Downloads][downloads-img]][downloads-url]
[![Issues][issues-img]][issues-url]
[![Code Coverage][codecov-img]][codecov-url]
[![Commitizen Friendly][commitizen-img]][commitizen-url]
[![Semantic Release][semantic-release-img]][semantic-release-url]

---

**📘Documentation**: [https://34j.github.io/react-ag-psd-psdtool/docs/](https://34j.github.io/react-ag-psd-psdtool/docs/)

**📦️NPM Package**: [https://www.npmjs.com/package/react-ag-psd-psdtool](https://www.npmjs.com/package/react-ag-psd-psdtool)

---

[PSDTool](https://oov.github.io/psdtool/)([kit](https://oov.github.io/aviutl_psdtoolkit/index.html))-like React Component built on top of [ag-psd-psdtool](https://github.com/34j/ag-psd-psdtool) (🔴LIVE Demo : [https://34j.github.io/react-ag-psd-psdtool/](https://34j.github.io/react-ag-psd-psdtool/))

## Installation

```bash
npm install react-ag-psd-psdtool
```

## Usage

```tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import psdUrl from './ccchu.psd?url'
import PsdTool from './PsdTool.tsx'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import './main.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <PsdTool url={psdUrl} />
  </StrictMode>,
)
```

[build-img]:https://github.com/34j/react-ag-psd-psdtool/actions/workflows/release.yml/badge.svg
[build-url]:https://github.com/34j/react-ag-psd-psdtool/actions/workflows/release.yml
[downloads-img]:https://img.shields.io/npm/dt/react-ag-psd-psdtool
[downloads-url]:https://www.npmtrends.com/react-ag-psd-psdtool
[npm-img]:https://img.shields.io/npm/v/react-ag-psd-psdtool
[npm-url]:https://www.npmjs.com/package/react-ag-psd-psdtool
[issues-img]:https://img.shields.io/github/issues/34j/react-ag-psd-psdtool
[issues-url]:https://github.com/34j/react-ag-psd-psdtool/issues
[codecov-img]:https://codecov.io/gh/34j/react-ag-psd-psdtool/branch/main/graph/badge.svg
[codecov-url]:https://codecov.io/gh/34j/react-ag-psd-psdtool
[semantic-release-img]:https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
[semantic-release-url]:https://github.com/semantic-release/semantic-release
[commitizen-img]:https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
[commitizen-url]:http://commitizen.github.io/cz-cli/