2.0 MagicScript Components

MagicScript Components simplify JavaScript app development for Magic Leap. With the Components framework you can build Landscape mixed-reality apps with React.js, declarative elements, and JavaScript. MagicScript Components provide a predefined set of user interface elements you can include in your mixed reality apps using the React.js development style.

React.js

React.js is a leading JavaScript library for developing single page web apps. Using React.js, you can declare the user interface with independent, reusable pieces, called components.

You can declare the user interface in React.js with JSX (JavaScript XML), which lets you mix XML tags with JavaScript code. Your app experience can combine HTML user interfaces with the flexibility and power of JavaScript. The example below uses JSX to create a shopping list:

class ShoppingList(props) {
const listItems = props.items.map(item => <li>{item}</li>);
return (
<div className="shopping-list">
<h1>Shopping List for {props.name}</h1>
<ul>
{listItems}
</ul>
</div>
);
}

Behind the scene, React converts the JSX to JavaScript calls. The snippet "

  • {item}
    • " is converted to "React.createElement('li', {}, item);". By executing all the function calls, React creates a JavaScript object tree. Using the generated object tree, React renders the corresponding user interfaces to DOM elements.

    This example is a React functional component. By breaking down the user interface into components, you can take advantage of best coding practices, such as Single Responsibility and Do Not Repeat Yourself. This makes apps easy to maintain and expand with further functionality.

    For more information, see What is React and an Introduction to JS.

    MagicScript Components

    MagicScript Components extend React Components concepts to spatial computing, letting you place digital content in the user's space. MagicScript Components let you build Mixed Reality JavaScript apps according to the React development style using JSX and over 30 UI components supported on Magic Leap's operating system, Lumin OS, as well as iOS and Android. Below is a simple MagicScript Components app showing the text "Hello MagicScript".

    import React from "react";
    import { View, Text } from "magic-script-components";]
    export default class MyApp extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
    message: "Hello MagicScript"
    };
    }
    render() {
    return (
    <View name="main-view">
    <Text textSize={0.1} localPosition={[-0.3, 0, 0]}>
    {this.state.message}
    </Text>
    </View>
    );
    }
    }

    This example shows the main app component which extends React.Component. You can use functional components provided by React as well. Important: MagicScript Components do not have a browser context or a web view, so some web APIs and W3C APIs might not be available in MagicScript Components.

    Each component in the magic-script-components library exposes a variety of properties and events that let you manage the rendered user interface. For example, the code snippet above has localPosition={[-0.3, 0, 0]}. This instructs the framework to render the Text component at -0.3m, which is to the left of the prism's center. The localPosition property expects the array [x, y, z].

    Components

    MagicScript ComponentLumin Runtime Native ComponentLumin OSiOSAndroid
    AudioAudioNodeYesYesYes
    ButtonUiButtonYesYesYes
    CircleConfirmationUiCircleConfirmationYesYesYes
    ColorPickerUiColorPickerYesYesYes
    ContentTransformNodeYesYesYes
    DatePickerUiDatePickerYesYesYes
    DialogUiDialogYesYesYes
    DropdownListUiDropdownListYesYesYes
    DropdownListItemDropdownListItemYesYesYes
    GridLayoutUiGridLayoutYesYesYes
    ImageUiImageYesYesYes
    LightLightNodeYes
    LineLineNodeYesYesYes
    LinearLayoutUiLinearLayoutYesYesYes
    ListViewUiListViewYesYesYes
    ListViewItemUiListViewItemYesYesYes
    ModelModelNodeYesYesYes
    PageViewUiPageViewYesYesYes
    PanelUiPanelYesYesYes
    PortalIconUiPortalIconYesYesYes
    ProgressBarUiProgressBarYesYesYes
    QuadQuadNodeYes
    RectLayoutUiRectLayoutYesYesYes
    ScrollBarUiScrollBarYesYesYes
    ScrollViewUiScrollViewYesYesYes
    SliderUiSliderYesYesYes
    SpinnerUiLoadingSpinnerYesYesYes
    TabUiTabYesYesYes
    TextUiTextYesYesYes
    TextEditUiTextEditYesYesYes
    TimePickerUiTimePickerYesYesYes
    ToggleUiToggleYesYesYes
    ToggleGroupUiToggleGroupYesYesYes
    VideoVideoNodeYesYesYes
    ViewUiGroupYesYesYes
    WebViewUiWebViewYesYesYes

    For more information on the supported MagicScript Components, see https://components.magicscript.org/docs/components. }