Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including magic-script-components with all npm packages installed. Try it out:

require("@babel/core/package.json"); // @babel/core is a peer dependency. require("@babel/plugin-transform-react-jsx/package.json"); // @babel/plugin-transform-react-jsx is a peer dependency. require("@babel/plugin-proposal-class-properties/package.json"); // @babel/plugin-proposal-class-properties is a peer dependency. require("rollup-plugin-babel/package.json"); // rollup-plugin-babel is a peer dependency. var magicScriptComponents = require("magic-script-components")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

magic-script-components v2.0.1

MagicScript Component Framework

MagicScript Components

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free