90 | );
91 | }
92 | }
93 |
--------------------------------------------------------------------------------
/src/ui/OverlayVariables.tsx:
--------------------------------------------------------------------------------
1 | /** @license
2 | * Copyright 2016 Google Inc. All Rights Reserved.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License"); you may not
5 | * use this file except in compliance with the License. You may obtain a copy
6 | * of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
12 | * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13 | * License for the specific language governing permissions and limitations
14 | * under the License.
15 | */
16 |
17 | import * as React from 'react';
18 |
19 | import { StringVariable } from '../core/variables/StringVariable';
20 | import { Variable } from '../core/variables/Variable';
21 | import { ControlType, CSS } from '../lib/Constants';
22 | import { ColorSwatchControl } from './controls/ColorSwatchControl';
23 | import { IControlUpdateProps } from './controls/controlProps';
24 | import { DropdownControl } from './controls/DropdownControl';
25 | import { RadioListControl } from './controls/RadioListControl';
26 | import { SliderControl } from './controls/SliderControl';
27 | import { SwitchControl } from './controls/SwitchControl';
28 | import { TextFieldControl } from './controls/TextFieldControl';
29 |
30 | /**
31 | * Interface for a React class that requires an array of Variables.
32 | * @interface
33 | * @extends IControlUpdateProps
34 | */
35 | export interface IOverlayVariableProps extends IControlUpdateProps {
36 | variables: Variable[];
37 | }
38 |
39 | /**
40 | * Renders a list of remixer controls for each variable.
41 | *
42 | * @class
43 | * @extends React.Component
44 | */
45 | export class OverlayVariables extends React.Component {
46 |
47 | /** @override */
48 | render() {
49 | return (
50 |
Remixer for JavaScript
2 |
3 | 
4 |
5 | [](https://travis-ci.org/material-foundation/material-remixer-js) [](https://codecov.io/gh/material-foundation/material-remixer-js) [](https://badge.fury.io/js/material-remixer) [](https://discord.gg/material-remixer)
6 |
7 |
8 | Remixer is a framework to iterate quickly on UI changes by allowing you to adjust UI variables without needing to rebuild (or even restart) your app. You can adjust Numbers, Colors, Booleans, and Strings. To see it in action check out the [example app](https://github.com/material-foundation/material-remixer-js/tree/develop/examples).
9 |
10 | If you are interested in using Remixer in another platform, you may want to check out the [iOS](https://github.com/material-foundation/material-remixer-ios) and [Android](https://github.com/material-foundation/material-remixer-android) repos. With any of the three platforms you can use the [Remote Controller](https://github.com/material-foundation/material-remixer-remote-web) to change the variables from a web dashboard.
11 |
12 | ## Using Remixer in your app
13 |
14 | #### 1. Use [`npm`](https://www.npmjs.com/) to install as dependency.
15 |
16 | `npm install material-remixer --save`
17 |
18 | This will install the Remixer files in your project's `node_modules` folder.
19 |
20 | #### 2. Include the `remixer.js` script in your app.
21 |
22 | ```html
23 |
24 | ```
25 |
26 | #### 3. Begin by starting Remixer.
27 |
28 | ```javascript
29 | remixer.start();
30 | ```
31 |
32 | #### 4. (Optional) Configure the Web Remote Controller
33 |
34 | This **optional** step is only needed if you wish to use the Web Remote Controller. If so, follow these guidelines:
35 |
36 | - Set up a new or existing [Firebase](https://firebase.google.com/) account as detailed in the [Web Remote Controller](https://github.com/material-foundation/material-remixer-remote-web) repository.
37 | - Add your Firebase account credentials to your app, and forward the param to the `remixer.start()` method.
38 |
39 | ```javascript
40 | // Replace with your project's Firebase info.
41 | var config = {
42 | apiKey: "