lewiswolf / maxmsp-gui

React component library for stylised Max MSP GUI.

maxmsp-gui

by Lewis Wolf

React component library for stylised Max MSP GUI.

Demo

Install

npm i maxmsp-gui

Usage

import * as MaxMSP from 'maxmsp-gui'

export default function App() {
	return (
		<>
			<MaxMSP.Bang
				ariaLabel='Set the aria-label tag.' // defaults to the object name
				ariaPressed={true || false} // default null
				onClick={() => console.log('bang')}
			/>

			<MaxMSP.Ezdac
				ariaLabel='Set the aria-label tag.' // defaults to the object name
				setValue={true || false} // set the current state
				onClick={(b: boolean) => console.log(b)}
			/>

			<MaxMSP.Message
				ariaLabel='Set the aria-label tag.' // defaults to the object name
				ariaPressed={true || false} // default null
				text='What does the message say?'
				onClick={() => console.log('bang')}
			/>

			<MaxMSP.Object
				inactive={true || false} // default false
				text='What is the object called?'
			/>

			<MaxMSP.Playbar
				ariaLabel='Set the aria-label tag.' // defaults to the object name
				inactive={true || false} // disable user interaction, default false
				setPlaying={true || false} // set onPlay externally
				setValue={0} // initial/updated state, 0 to props.fidelity
				width={200} // width of the slider in pixels
				onPlay={(b: boolean) => console.log(b)}
				onChange={(x: number) => console.log(`My value is ${x}`)} // 0 - props.fidelity
			/>

			<MaxMSP.RadioGroup
				ariaLabel='Set the aria-label tag.' // defaults to the object name
				items={['array', 'of', 'items']} // this sets the amount of radiobuttons, strings create text alongside each button
				spacing={24} // the height of each button in pixels
				setValue={0} // props.items[i]
				onClick={(i: number) => console.log(`My index is ${i}`)}
			/>

			<MaxMSP.Slider
				ariaLabel='Set the aria-label tag.' // defaults to the object name
				setValue={0} // initial/updated state, 0 to props.fidelity
				width={200} // width of the slider in pixels
				onChange={(x: number) => console.log(`My value is ${x}`)} // 0 - props.fidelity
			/>

			<MaxMSP.TextButton
				ariaLabel='Set the aria-label tag.' // defaults to the object name
				ariaPressed={true || false} // default null, for button mode only
				inactive={true || false} // disable user interaction, default false
				mode={true || false} // true for toggle, false for bang, default false
				setValue={true || false} // default false, for toggle mode only
				text='What does the textbutton say?'
				toggleText='What does the toggled textbutton say?'
				onChange={(b: boolean) => console.log(b)} // toggle mode only
				onClick={() => console.log('bang')}
			/>

			<MaxMSP.Toggle
				ariaLabel='Set the aria-label tag.' // defaults to the object name
				setValue={true || false} // set the current state
				onClick={(b: boolean) => console.log(b)}
			/>

			<MaxMSP.Umenu
				ariaLabel='Set the aria-label tag.' // defaults to the object name
				items={['array', 'of', 'items']}
				setValue={0} // props.items[i]
				width={100} // width of the umenu in pixels
				onChange={(i: number) => console.log(`My index is ${i}`)}
			/>
		</>
	)
}

All components return a div, and so the css can be accessed/overwritten in the following way:

.wrapper div:nth-of-type(n) {
    // css goes here
}

Development

Install

git clone ...
npm install --include=dev

Run

npm run build
npm run example

Test

npm run dev
npm run format
npm run test