2.5.0 • Published 10 months ago
maxmsp-gui v2.5.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.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