# clef-ui-sdk

> ClefDisc component and function lib for song playback control

Latest version **1.9.0** (published 2023-04-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install clef-ui-sdk
pnpm add clef-ui-sdk
yarn add clef-ui-sdk
bun add clef-ui-sdk
```

## Health

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

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.9.0 |
| Published | 2023-04-06 |
| First published | 2022-12-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 7 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Igor Smolkov |
| Maintainers | nonum |

## Links

- npm: https://www.npmjs.com/package/clef-ui-sdk
- Repository: https://github.com/igor-smolkov/clef-ui-sdk
- Homepage: https://github.com/igor-smolkov/clef-ui-sdk#readme
- Issues: https://github.com/igor-smolkov/clef-ui-sdk/issues
- npm.io page: https://npm.io/package/clef-ui-sdk

## Dependencies (7)

- [p5](https://npm.io/package/p5.md) ^1.5.0
- [tone](https://npm.io/package/tone.md) ^14.7.77
- [react-p5](https://npm.io/package/react-p5.md) ^1.3.33
- [chroma-js](https://npm.io/package/chroma-js.md) ^2.4.2
- [classnames](https://npm.io/package/classnames.md) ^2.3.2
- [html2canvas](https://npm.io/package/html2canvas.md) ^1.4.1
- [react-error-boundary](https://npm.io/package/react-error-boundary.md) ^3.1.4

## Recent versions

- 1.9.0 (latest) — 2023-04-06
- 1.8.4 — 2023-03-29
- 1.8.3 — 2023-03-29
- 1.8.2 — 2023-03-23
- 1.8.1 — 2023-03-23
- 1.8.0 — 2023-03-23
- 1.7.1 — 2023-02-27
- 1.7.0 — 2023-02-27
- 1.6.2 — 2022-12-08
- 1.6.1 — 2022-12-07
- 1.6.0 — 2022-12-07
- 1.5.1 — 2022-12-06
- 1.5.0 — 2022-12-06
- 1.4.1 — 2022-12-05
- 1.4.0 — 2022-12-05
- … 13 more at https://npm.io/package/clef-ui-sdk/versions

## README

# Clef UI SDK
  
ClefDisc component and function lib for song playback control  
  
```bash
npm i clef-ui-sdk
```

## ClefDisc

Minimal example:

```js
import { ClefDisc } from 'clef-ui-sdk';

const Foo = () => <ClefDisc assetID={ASSET_ID} />;
```
  
Full example:

```ts
import { ClefDisc } from 'clef-ui-sdk';

const Foo = () => {
  const handleImageReady = (image: string) => console.log(image);
  return <ClefDisc assetID={ASSET_ID} isAnimate borderColor="#ffffff" onImageReady={handleImageReady} />;
}
```
  
- assetID - asset identifier  
- isAnimate - enable rotation (optional)  
- borderColor - disc border color (optional, no border by default)  
- colors - pass array of [COLORS](https://github.com/automainint/clef#sdk) or get colors from asset if `null` or `undefined` (optional, `null` by default)  
- size - `small-responsive`: 28px - 34px, `normal-responsive`: 92px - 240px (`normal-responsive` by default)  
- onImageReady - callback, if passed, returns the base64 png image in the `image` parameter (optional, not converted by default)  

```ts
type Props = {
  assetID: string;
  isAnimate?: boolean;
  borderColor?: string;
  colors?: SongColor[] | null;
  size?: 'small-responsive' | 'normal-responsive';
  onImageReady?: (image: string) => void;
};
```
  
## SDK

Providing functions from [SDK](https://github.com/automainint/clef#sdk):
  
Function `play_song_by_asset_id` partially applied.  
No first argument `Tone`  
  
- get_song_name_by_asset_id
- set_volume
- play_song_by_asset_id
- stop

```js
import { get_song_name_by_asset_id } from 'clef-ui-sdk';
```

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