Merge pull request #9 from gebeto/master

Added types definition for using with TypeScript

Author: rohan-deshpande

README.md

@@ -59,8 +59,8 @@ React dat.GUI uses React and React-DOM `^16.0.0` aka React Fiber. It's recommend
 
 First you'll need a wrapper component which will handle the updates from your dat.GUI, this component should pass the data for the GUI to control as well as an `onUpdate` function to the `DatGui` container component as props. Here's how you might do that:
 
-```
-import '../node_modules/react-dat-gui/build/react-dat-gui.css';
+```jsx
+import 'react-dat-gui/build/react-dat-gui.css';
 import React, { Component } from 'react';
 
 import DatGui, { DatBoolean, DatButton, DatNumber, DatString } from 'react-dat-gui';

index.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+
+export interface DatGuiProps {
+    data: any;                      // The data your dat.GUI controller will mutate
+    onUpdate: (data: any) => any;   // The method which will be called whenever an update is handled by the controller
+    children: any; // The dat.GUI components that make up the controller
+    liveUpdate?: boolean;           // Determines if live updates should occur, defaults to true
+    labelWidth?: number;            // The width of the labels in pixels, defaults to 40
+    className?: string;             // The class name to set on the DatGui div
+    style?: StyleSheet;             // The style object to set on the DatGui div
+}
+
+export default class DatGui extends React.Component<DatGuiProps, any> { }
+
+export class DatUnchangableFieldProps {
+    label?: string;
+}
+
+export class DatChangableFieldProps extends DatUnchangableFieldProps {
+    path: string;
+}
+
+export interface DatButtonProps extends DatUnchangableFieldProps {
+    onClick: (e: React.MouseEvent) => any;
+}
+
+export class DatButton extends React.Component<DatButtonProps, any> { }
+
+export interface DatFolderProps extends DatUnchangableFieldProps {
+    title: string;
+    closed: boolean;
+    children: any;
+}
+
+export class DatFolder extends React.Component<DatFolderProps, any> { }
+
+export interface DatPresetsProps extends DatUnchangableFieldProps {
+    onUpdate: (data: any) => any;
+    options: {
+        presetName?: string;
+        data?: any; // Initial data
+        preset: any; // Your preset
+    }
+}
+
+export class DatPresets extends React.Component<DatPresetsProps, any> { }
+
+export interface DatBooleanProps extends DatChangableFieldProps { }
+
+export class DatBoolean extends React.Component<DatBooleanProps, any> { }
+
+export interface DatColorProps extends DatChangableFieldProps {
+    [reactColorProp: string]: any;
+}
+
+export class DatColor extends React.Component<DatColorProps, any> { }
+
+export interface DatNumberProps extends DatChangableFieldProps {
+    min: number;
+    max: number;
+    step: number;
+}
+
+export class DatNumber extends React.Component<DatNumberProps, any> { }
+
+export interface DatSelectProps extends DatChangableFieldProps {
+    options: any[];
+}
+
+export class DatSelect extends React.Component<DatSelectProps, any> { }
+
+export interface DatStringProps extends DatChangableFieldProps { }
+
+export class DatString extends React.Component<DatStringProps, any> { }

package.json

@@ -4,6 +4,7 @@
   "description": "dat.GUI reimagined for React",
   "main": "build/react-dat-gui.js",
   "style": "build/react-dat-gui.css",
+  "types": "index.d.ts",
   "contributors": [
     {
       "name": "Claus Wahlers",