open-index/open-npm huggingface dataset:
npm package: @mdckiller/audio-waveform-viewer-react
Description: React wrapper for @mdckiller/audio-waveform-viewer.
Latest version: 0.1.0

# @mdckiller/audio-waveform-viewer-react

React wrapper for `@mdckiller/audio-waveform-viewer`.

## Install

```bash
npm i @mdckiller/audio-waveform-viewer @mdckiller/audio-waveform-viewer-react
```

## Usage

```tsx
import { useMemo, useRef } from "react";
import {
  AudioWaveform,
  type AudioWaveformHandle,
  type ViewerChannelDefinition
} from "@mdckiller/audio-waveform-viewer-react";

export function Example() {
  const viewerRef = useRef<AudioWaveformHandle>(null);
  const channels = useMemo<ViewerChannelDefinition[]>(
    () => [
      {
        id: "sine",
        config: {
          name: "SINE",
          color: "#4da3ff",
          alpha: 1,
          lineWidth: 2,
          lineStyle: "solid",
          visible: true
        }
      }
    ],
    []
  );

  return (
    <div style={{ width: 900, height: 420 }}>
      <AudioWaveform
        ref={viewerRef}
        config={{
          timeWindow: 8000,
          yWindow: 2,
          axisPos: { x: 0, y: 0 },
          liveMode: true
        }}
        channels={channels}
        onReady={(viewer) => {
          viewer.addDataPoint("sine", { timestamp: Date.now(), value: 1 });
        }}
      />
    </div>
  );
}
```

`ref.current?.getViewer()` returns the core `AudioWaveformViewer` instance, so you can call API methods (`addDataPoint`, `setLiveMode`, `setTimeWindow`, etc.).
npm package: @mdclone/common
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.14.
Latest version: 0.0.2

# Common

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.14.

## Code scaffolding

Run `ng generate component component-name --project common` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project common`.
> Note: Don't forget to add `--project common` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build common` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build common`, go to the dist folder `cd dist/common` and run `npm publish`.

## Running unit tests

Run `ng test common` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @mdclone/core
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.14.
Latest version: 0.0.87

# Core

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.14.

## Code scaffolding

Run `ng generate component component-name --project core` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project core`.
> Note: Don't forget to add `--project core` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build core` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build core`, go to the dist folder `cd dist/core` and run `npm publish`.

## Running unit tests

Run `ng test core` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @mdclone/css-lib
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.14.
Latest version: 0.0.1

# CssLib

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.14.

## Code scaffolding

Run `ng generate component component-name --project css-lib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project css-lib`.
> Note: Don't forget to add `--project css-lib` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build css-lib` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build css-lib`, go to the dist folder `cd dist/css-lib` and run `npm publish`.

## Running unit tests

Run `ng test css-lib` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).