2.4.0 • Published 2 months ago
maxmsp-gui v2.4.0
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
2.4.0
2 months ago
2.3.3
5 months ago
2.3.2
5 months ago
2.3.1
5 months ago
2.3.0
7 months ago
2.2.4
8 months ago
2.2.1
1 year ago
2.2.0
1 year ago
2.1.1
1 year ago
2.2.3
1 year ago
2.2.2
1 year ago
2.0.3
1 year ago
2.0.2
1 year ago
2.0.5
1 year ago
2.0.4
1 year ago
2.0.6
1 year ago
2.1.0
1 year ago
2.0.1
1 year ago
2.0.0
2 years ago
1.0.2
3 years ago
1.0.3
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago