2.5.0 • Published 10 months ago

maxmsp-gui v2.5.0

Weekly downloads
8
License
Creative Commons ...
Repository
github
Last release
10 months ago

maxmsp-gui

by Lewis Wolf

React component library for stylised Max MSP GUI.

NPM JavaScript Style Guide

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
2.5.0

10 months ago

2.4.7

11 months ago

2.4.6

11 months ago

2.4.5

1 year ago

2.4.4

1 year ago

2.4.1

1 year ago

2.4.3

1 year ago

2.4.2

1 year ago

2.4.0

2 years ago

2.3.3

2 years ago

2.3.2

2 years ago

2.3.1

2 years ago

2.3.0

2 years ago

2.2.4

2 years ago

2.2.1

3 years ago

2.2.0

3 years ago

2.1.1

3 years ago

2.2.3

3 years ago

2.2.2

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.5

3 years ago

2.0.4

3 years ago

2.0.6

3 years ago

2.1.0

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.0.2

4 years ago

1.0.3

4 years ago

1.0.1

5 years ago

1.0.0

5 years ago