rakannimer/react-nexusui

Thin, typed react components for rendering NexusUI HTML5 web audio interfaces

React NexusUI

React component wrappers for the NexusUI HTML5 Web Audio interfaces.

• React NexusUI
  • Install
  • Usage
  • Demo
  • API
    • Core
      • Button
      • Dial
      • Number
      • Position
      • Slider
      • Toggle
    • General
      • Envelope
      • Multislider
      • Piano
      • RadioButton
      • Select
      • Sequencer
      • TextButton
    • Mobile
      • Tilt
    • Spatialization
      • Pan
      • Pan2D

Install

npm i nexusui react-nexusui

Usage

import { TextButton, Dial } from 'react-nexusui';

function App(){
  return <div>
    <TextButton text="Click me" onChange={console.log} />
  </div>
}

Demo

• Source code

• Output

API

Check http://nexus-js.github.io/ui/api/

Core

Button

type ButtonProps = {
  size?: [number, number];
  mode?: "button" | "aftertouch" | "impulse" | "toggle";
  state?: boolean | number;
  onChange?: (state: boolean | number) => any;
  onReady?: (button: Nexus.Button) => any;
}

Dial

type DialProps = {
  size?: [number, number];
  interaction?: "radial" | "vertical" | "horizontal";
  mode?: "absolute" | "relative";
  min?: number;
  max?: number;
  step?: number;
  value?: number;
  onChange?: (value: number) => any;
  onReady?: (dial: Nexus.Dial) => any;
}

Number

type NumberProps = {
  size?: [number, number];
  min?: number;
  max?: number;
  step?: number;
  value?: number;
  onChange?: (value: number) => any;
  onReady?: (number: Nexus.Number) => any;
};

Position

type PositionProps = {
  size?: [number, number];
  mode?: "absolute" | "relative";
  x?: number;
  y?: number;
  minX?: number;
  minY?: number;
  maxX?: number;
  maxY?: number;
  stepX?: number;
  stepY?: number;
  onChange?: (value: { x: number; y: number }) => any;
  onReady?: (position: Nexus.Position) => any;
};

Slider

export type SliderProps = {
  size?: [number, number];
  mode?: "absolute" | "relative";
  min?: number;
  max?: number;
  step?: number;
  value?: number;
  onChange?: (value: number) => any;
  onReady?: (slider: Nexus.Slider) => any;
};

Toggle

export type ToggleProps = {
  size?: [number, number];
  mode?: "absolute" | "relative";
  min?: number;
  max?: number;
  step?: number;
  value?: number;
  onChange?: (value: number) => any;
  onReady?: (slider: Nexus.Toggle) => any;
};

General

Envelope

type EnvelopeProps = {
  size?: [number, number];
  noNewPoints?: boolean;
  points?: { x: number; y: number }[];
  onChange?: (points: { x: number; y: number }[]) => any;
  onReady?: (envelope: Nexus.Envelope) => any;
};

Multislider

type MultisliderProps = {
  size?: [number, number];
  numberOfSliders?: number;
  min?: number;
  max?: number;
  step?: number;
  candycane?: number;
  values?: number[];
  smoothing?: number;
  mode?: "bar" | "line";
  onChange?: (change: { index: number; value: number }) => any;
  onReady?: (multislider: Nexus.Multislider) => any;
};

Piano

type PianoProps = {
  size?: [number, number];
  mode?: "button" | "toggle" | "impulse";
  lowNote?: number;
  highNote?: number;
  onChange?: (change: { note: number; state: boolean }) => any;
  onReady?: (piano: Nexus.Piano) => any;
};

RadioButton

type RadioButtonProps = {
  size?: [number, number];
  numberOfButtons?: number;
  active?: number;
  onReady?: (button: Nexus.RadioButton) => any;
  onChange?: (change: number) => any;
};

Select

type SelectProps = {
  size?: [number, number];
  options: string[];
  value?: string;
  selectedIndex?: number;
  onReady?: (select: Nexus.Select) => any;
  onChange?: (change: { value: string; index: number }) => any;
};

Sequencer

type SequencerProps = {
  size?: [number, number];
  mode?: ButtonProps["mode"];
  rows?: number;
  columns?: number;
  onChange?: (change: { row: number; column: number; state: boolean }) => any;
  onStep?: (change: boolean[]) => any;
  onReady?: (select: Nexus.Sequencer) => any;
};

TextButton

type TextButtonProps = {
  size?: [number, number];
  state?: boolean;
  text?: string;
  alternateText?: string;
  onChange?: (change: string) => any;
  onReady?: (textbutton: Nexus.TextButton) => any;
};

Mobile

Tilt

type TiltProps = {
  size?: [number, number];
  active?: boolean;
  onChange?: (change: { x: number; y: number; z: number }) => any;
  onReady?: (tilt: Nexus.Tilt) => any;
};

Spatialization

Pan

type PanProps = {
  size?: [number, number];
  value?: number;
  onChange?: (change: { value: number; L: number; R: number }) => any;
  onReady?: (pan: Nexus.Pan) => any;
};

Pan2D

type Pan2DProps = {
  size?: [number, number];
  range?: number;
  mode?: "absolute" | "relative";
  speakers?: [number, number][];
  onChange?: (change:  number[]) => any;
  onReady?: (pan: Nexus.Pan2D) => any;
};