apeman-react-mixins/README.md

React mixin set of apeman.

apeman-react-mixins
==========

<!---
This file is generated by ape-tmpl. Do not update manually.
--->

<!-- Badge Start -->
<a name="badges"></a>

[![Build Status][bd_travis_shield_url]][bd_travis_url]
[![Code Climate][bd_codeclimate_shield_url]][bd_codeclimate_url]
[![Code Coverage][bd_codeclimate_coverage_shield_url]][bd_codeclimate_url]
[![npm Version][bd_npm_shield_url]][bd_npm_url]

[bd_repo_url]: https://github.com/apeman-react-labo/apeman-react-mixins
[bd_travis_url]: http://travis-ci.org/apeman-react-labo/apeman-react-mixins
[bd_travis_shield_url]: http://img.shields.io/travis/apeman-react-labo/apeman-react-mixins.svg?style=flat
[bd_license_url]: https://github.com/apeman-react-labo/apeman-react-mixins/blob/master/LICENSE
[bd_codeclimate_url]: http://codeclimate.com/github/apeman-react-labo/apeman-react-mixins
[bd_codeclimate_shield_url]: http://img.shields.io/codeclimate/github/apeman-react-labo/apeman-react-mixins.svg?style=flat
[bd_codeclimate_coverage_shield_url]: http://img.shields.io/codeclimate/coverage/github/apeman-react-labo/apeman-react-mixins.svg?style=flat
[bd_gemnasium_url]: https://gemnasium.com/apeman-react-labo/apeman-react-mixins
[bd_gemnasium_shield_url]: https://gemnasium.com/apeman-react-labo/apeman-react-mixins.svg
[bd_npm_url]: http://www.npmjs.org/package/apeman-react-mixins
[bd_npm_shield_url]: http://img.shields.io/npm/v/apeman-react-mixins.svg?style=flat
[bd_bower_badge_url]: https://img.shields.io/bower/v/apeman-react-mixins.svg?style=flat

<!-- Badge End -->


<!-- Description Start -->
<a name="description"></a>

React mixin set of apeman.

<!-- Description End -->


<!-- Overview Start -->
<a name="overview"></a>



<!-- Overview End -->


<!-- Sections Start -->
<a name="sections"></a>

<!-- Section from "doc/guides/01.Installation.md.hbs" Start -->

<a name="section-doc-guides-01-installation-md"></a>
Installation
-----

```bash
$ npm install apeman-react-mixins --save
```


<!-- Section from "doc/guides/01.Installation.md.hbs" End -->

<!-- Section from "doc/guides/03.Usage.md.hbs" Start -->

<a name="section-doc-guides-03-usage-md"></a>
Usage
---------


### ApLocaleMixin

If you set `locale` prop to a locale-mixed component,
all locale-mixed descendants has access to the locale


```jsx
/**
 * This is an example to use ApLocaleMixin.
 */
"use strict";

import React from 'react';
import {ApLocaleMixin} from 'apeman-react-mixins';

let Parent = React.createClass({
    mixins: [
        ApLocaleMixin
    ],
    render () {
        let s = this,
            l = s.getLocale();
        return (
            <div>
                <span>This is parent of {l.title}</span>
            </div>
        )
    }
});


let Child = React.createClass({
    mixins: [
        ApLocaleMixin // Add the mixin
    ],
    render () {
        let s = this,
            l = s.getLocale(); // Get locale registered in parent.
        return (
            <div>
                <span>This is child of {l.title}</span>
            </div>
        )
    }
});

let locale = {title: 'My awesome app'}; // Message resources.
let element = (<div>
    <Parent locale={locale}>
        <Child />
    </Parent>
</div>);

React.render(element, 'my-container', () => {
});

```

### ApTouchMixin

Touch mixin gives you finger gesture like pan, pinch, rotate, etc.


```jsx
/**
 * This is an example to use ApTouchMixin.
 */
"use strict";

import React from 'react';
import {ApTouchMixin} from 'apeman-react-mixins';

let Component = React.createClass({
    mixins: [
        ApTouchMixin
    ],
    render () {
        return (
            <div>Touch me!</div>
        )
    }
});
let element = (<div>
    <Component onTap={(e)=>{/*...*/}}>
    </Component>
</div>);

React.render(element, 'my-container', () => {
});

```

**Available Props**

+ onTap
+ onDoubleTap
+ onPan
+ onPanStart
+ onPanMove
+ onPanEnd
+ onPanCancel
+ onSwipe
+ onPress
+ onPressUp
+ onPinch
+ onPinchStart
+ onPinchMove
+ onPinchEnd
+ onPinchCancel
+ onRotate
+ onRotateStart
+ onRotateMove
+ onRotateEnd
+ onRotateCancel
+ touchOptions
+ panThreshold
+ panDirection
+ swipeDirection


### ApResizeMixin

Add window resize event handler.

```jsx
/**
 * This is an example to use ApResizeMixin.
 */
"use strict";

import React from 'react';
import {ApResizeMixin} from 'apeman-react-mixins';

let Component = React.createClass({
    mixins: [
        ApResizeMixin
    ],
    render () {
        return (
            <div>Foo</div>
        )
    },
    /** Handler of window resize event */
    windowDidResize(e){
        /*..*/
    }

});
let element = (<div>
    <Component>
    </Component>
</div>);

React.render(element, 'my-container', () => {
});

```

### ApStackMixin

Handle ApViewStack stacker

```jsx
/**
 * This is an example to use ApStackMixin.
 */
"use strict";

import React from 'react';
import {ApStackMixin} from 'apeman-react-mixins';

let Component = React.createClass({
    mixins: [
        ApStackMixin
    ],
    render () {
        let s = this;
        return (
            <div>{s.renderStack()}</div>
        )
    },

    stackedViewDidPush(view) {

    },

    stackedViewDidPop(view){

    }

});

let stacker = Component.Stacker(); // Create istance of ApViewStack.Stacker
stacker.pushView('div', {});

let element = (<div>
    <Component stacker={stacker}>
    </Component>
</div>);

React.render(element, 'my-container', () => {
});

```

### ApEnvMixin

Handle env

```jsx
/**
 * This is an example to use ApEnvMixin.
 */
"use strict";

import React from 'react';
import {ApEnvMixin} from 'apeman-react-mixins';

let Component = React.createClass({
    mixins: [
        ApEnvMixin
    ],
    render () {
        let s = this;
        return (
            <div>{ s.isProductionEnv() ? null : 'Hi, there' }</div>
        )
    }
});
let element = (<div>
    <Component NODE_ENV={ process.env.NODE_ENV }>
    </Component>
</div>);

React.render(element, 'my-container', () => {
});

```

### ApSideMixin

Check server-side or client-side

```jsx
/**
 * This is an example to use ApSideMixin.
 */
"use strict";

import React from 'react';
import {ApSideMixin} from 'apeman-react-mixins';

let Component = React.createClass({
    mixins: [
        ApSideMixin
    ],
    render () {
        let s = this;
        return (
            <div>{s.isClientSide() ? 'Client' : 'Server'}</div>
        )
    }
});
let element = (<div>
    <Component>
    </Component>
</div>);

React.render(element, 'my-container', () => {
});

```

<!-- Section from "doc/guides/03.Usage.md.hbs" End -->


<!-- Sections Start -->


<!-- LICENSE Start -->
<a name="license"></a>

License
-------
This software is released under the [MIT License](https://github.com/apeman-react-labo/apeman-react-mixins/blob/master/LICENSE).

<!-- LICENSE End -->


<!-- Links Start -->
<a name="links"></a>

Links
------

+ [apeman](https://github.com/apeman-labo/apeman)
+ [apeman-react-labo](https://github.com/apeman-react-labo)
+ [React](https://facebook.github.io/react/)

<!-- Links End -->