UNPKG

2.97 kBMarkdownView Raw
1# rmc-align
2---
3
4React Align Component. Wrapper around https://github.com/yiminghe/dom-align.
5
6[![NPM version][npm-image]][npm-url]
7[![build status][travis-image]][travis-url]
8[![Test coverage][coveralls-image]][coveralls-url]
9[![gemnasium deps][gemnasium-image]][gemnasium-url]
10[![node version][node-image]][node-url]
11[![npm download][download-image]][download-url]
12
13[npm-image]: http://img.shields.io/npm/v/rmc-align.svg?style=flat-square
14[npm-url]: http://npmjs.org/package/rmc-align
15[travis-image]: https://img.shields.io/travis/react-component/m-align.svg?style=flat-square
16[travis-url]: https://travis-ci.org/react-component/m-align
17[coveralls-image]: https://img.shields.io/coveralls/react-component/m-align.svg?style=flat-square
18[coveralls-url]: https://coveralls.io/r/react-component/m-align?branch=master
19[gemnasium-image]: http://img.shields.io/gemnasium/react-component/m-align.svg?style=flat-square
20[gemnasium-url]: https://gemnasium.com/react-component/m-align
21[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
22[node-url]: http://nodejs.org/download/
23[download-image]: https://img.shields.io/npm/dm/rmc-align.svg?style=flat-square
24[download-url]: https://npmjs.org/package/rmc-align
25
26
27## Development
28
29```
30npm install
31npm start
32```
33
34## Example
35
36http://localhost:8100/examples/
37
38online example: http://react-component.github.io/align/examples/
39
40
41## Feature
42
43* support ie8,ie8+,chrome,firefox,safari
44
45### Keyboard
46
47
48
49## install
50
51[![rmc-align](https://nodei.co/npm/rmc-align.png)](https://npmjs.org/package/rmc-align)
52
53## Usage
54
55```js
56var Align = require('rmc-align');
57var ReactDOM = require('react-dom');
58ReactDOM.render(<Align align={{}} target={function(){}}><div></div></Align>, container);
59```
60
61will align child with target when mounted or align is changed
62
63## API
64
65### props
66
67<table class="table table-bordered table-striped">
68 <thead>
69 <tr>
70 <th style="width: 100px;">name</th>
71 <th style="width: 50px;">type</th>
72 <th style="width: 50px;">default</th>
73 <th>description</th>
74 </tr>
75 </thead>
76 <tbody>
77 <tr>
78 <td>align</td>
79 <td>Object</td>
80 <td></td>
81 <td>same with alignConfig from https://github.com/yiminghe/dom-align</td>
82 </tr>
83 <tr>
84 <td>onAlign</td>
85 <td>function(source:HTMLElement, align:Object)</td>
86 <td></td>
87 <td>called when align</td>
88 </tr>
89 <tr>
90 <td>target</td>
91 <td>function():HTMLElement</td>
92 <td>function(){return window;}</td>
93 <td>a function which returned value is used for target from https://github.com/yiminghe/dom-align</td>
94 </tr>
95 <tr>
96 <td>monitorWindowResize</td>
97 <td>Boolean</td>
98 <td>false</td>
99 <td>whether realign when window is resized</td>
100 </tr>
101 </tbody>
102</table>
103
104
105## License
106
107rmc-align is released under the MIT license.