sg-react-components

React components for SUGOS project.

Installation

$ npm install sg-react-components --save

Demo

Live demo is hosted on GitHub Pages.

Usage

'use strict'

import React from 'react'
import {
  SgThemeStyle
} from 'sg-react-components'

const DOMINANT_COLOR = '#FFC533'

const ExampleComponent = React.createClass({
  render () {
    return (
      <div>
        <SgThemeStyle dominant={ DOMINANT_COLOR }/>
      </div>
    )
  }
})

Components

SgAlbum

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | width | number | 300 | | Width(px) of a image. | | imageList | array | [] | | List of image src. | | thumbnailCol | number | 4 | | Number of images per 1 row in the thumbnail. | | thumbnailSelectedColor | string | 'yellow' | | Border color of selected image in the thumbnail. | | onChange | func | | | Called when update. Argument is index of imageList. |

SgBody

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- |

SgButton

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- |

SgHead

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- |

SgHeader

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- |

SgHeart

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | width | number | 44 | | | | height | number | 44 | | | | heartRate | number | 60 | | | | id | string | | | |

SgHtml

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- |

SgKinectFrame

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | bodies | array | | | Body frame data from kinect | | width | number | depthSpace.BOUND_WIDTH | | Component width | | height | number | depthSpace.BOUND_HEIGHT | | Component height | | frameWidth | number | 4 | | Width of frames | | jointRadius | number | 3 | | Radius of joint | | scale | number | 2 | | Scale rate of canvas | | alt | string | 'NO BODY FOUND' | | Alt message when no body found | | colorizer | func | colorHelper.uniqueColorizer('#CCCC33') | | Colorizer function |

SgMain

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- |

SgMicrophone

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | width | number | 44 | | | | height | number | 44 | | | | on | bool | false | | |

SgPage

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- |

SgSwitch

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | width | number | | | Width(px) of a switch. | | on | bool | | | The state of on/off. | | onTap | func | | | Function on tap. | | onTitle | string | | | | | offTitle | string | | | | | highlightColor | string | | | | | backgroundColor | string | | | | | borderColor | string | | | | | handleSize | number | | | |

SgThemeStyle

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | style | object | {} | | | | dominant | string | ApStyle.DEFAULT_HIGHLIGHT_COLOR | | |

SgVideo

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | src | string|arrayOf | | | Video source URL | | playerRef | func | function() {} | | Register player |

License

This software is released under the Apache-2.0 License.

Links

• apeman
• apeman-react-labo
• React