Skip to content

magic-script/magic-script-components

Repository files navigation

MagicScript Components

codecov CI npm version npm downloads License

MagicScript Component Framework

Installation

  1. Install magic-script-cli:
npm install -g magic-script-cli
  1. Create a new MagicScript application:
magic-script init
  • Follow the steps.
  • Choose "Components" when application type is requested.
  1. Install the required npm packages from the app folder:
npm install
  1. Build and install your application:
magic-script build -i
  1. Refer to the MagicScript Getting Started guide for more information.

Example

Replace app.js content with this code for a more interactive use case:

import React from "react";
import { View, Text, Button } from "magic-script-components";

export default class MyApp extends React.Component {
  constructor(props) {
    super(props);

    this.state = { counter: props.counter };
    this.onButtonClick = this.onButtonClick.bind(this);
  }

  onButtonClick(event) {
    this.setState(state => ({ counter: state.counter + 1 }));
  }

  render() {
    return (
      <View name="main-view">
        <Text
          textSize={0.1}
          textColor={[0.1, 1, 0.1, 0.84]}
          localPosition={[0, 0.25, 0]}
        >
          {this.state.counter}
        </Text>
        <Button
          width={0.25}
          height={0.15}
          roundness={0.5}
          onClick={this.onButtonClick}
        >
          +
        </Button>
      </View>
    );
  }
}

Documentation

Updating documentation

  1. Get documentation source code and install dependencies
git clone https://github.com/magic-script/magic-script-components.git
cd magic-script-components
cd website
yarn
  1. Make your changes and test them locally
yarn start
  1. Save your changes
git commit
  1. Set system variable GIT_USER with you GitHub user name in e.g. .bash_profile or console export GIT_USER=<GitHub user name>

  2. Deploy on public website

yarn deploy
  • All documentation is in markdown format in docs directory. Just add your new markdown files there.
  • Refer to Docusaurus 2 docs for more advanced content management topics.

License

This project is licensed under the Apache License, Version 2.0 - see the LICENSE file for details