Getting Started with Opus UI
You're on your way to making music! This page will teach you everything you need to know to start using Opus UI in your applications.
Quick Start
To set up a new application, you can simply run the following command then follow the prompts:
Once your appliation has been created, navigate into the newly created folder then run:
If you're not sure which component libraries you might need, refer to this page.
Opus in existing applications
Installing Opus UI
npm install @intenda/opus-ui
You might also want to install the standard component library. This includes components like 'image', 'icon', and 'label'. You don't need to install it if you'll only be defining your own component types.
npm install @intenda/opus-ui-components
Basic usage
At a minimum, you can simply render your own components and then render Opus JSON within them. This is also called a 'hybrid' application. We'll discuss 'pure' applications later.
import React from 'react';
import { createRoot } from 'react-dom/client';
import Opus, { Component } from '@intenda/opus-ui';
import '@intenda/opus-ui-components';
const Welcome = () => {
return (
<div>
<span>Opus UI</span>
<Component mda={{
type: 'label',
prps: {
cpt: 'Harmonizing Interfaces'
}
}} />
</div>
);
};
const root = createRoot(document.getElementById('root'));
root.render(
<Opus startupComponent={<Welcome />} />
);
Registering component types
You can also register your own React components as Opus component types that you can then render through JSON. In this example, we register the 'Slogan' component:
import React from 'react';
import { createRoot } from 'react-dom/client';
import Opus, { Component } from './library';
const Welcome = () => {
return (
<div>
<span>Opus UI</span>
<Component mda={{
type: 'slogan',
prps: {}
}} />
</div>
);
};
const Slogan = ({ state: { slogan } }) => {
return (
<span>{slogan}</span>
);
};
const root = createRoot(document.getElementById('root'));
root.render(
<Opus
startupComponent={<Welcome />}
registerComponentTypes={[{
type: 'slogan',
component: Slogan,
propSpec: {
slogan: {
type: 'string',
dft: 'Harmonizing interfaces'
}
}
}]}
/>
);
Rendering JSON as the root
Instead of having a React component as the root, you can also render Opus JSON:
import React from 'react';
import { createRoot } from 'react-dom/client';
import Opus, { Component } from './library';
const Slogan = ({ state: { slogan } }) => {
return (
<span>{slogan}</span>
);
};
const root = createRoot(document.getElementById('root'));
root.render(
<Opus
startupMda={{
type: 'containerSimple',
wgts: [{
type: 'slogan',
prps: { slogan: 'Slogan 1' }
}, {
type: 'slogan',
prps: { slogan: 'Slogan 2' }
}]
}}
registerComponentTypes={[{
type: 'slogan',
component: Slogan,
propSpec: {
slogan: {
type: 'string',
dft: 'Harmonizing interfaces'
}
}
}]}
/>
);