|
1 | | -# rc-align |
| 1 | +# @rc-component/context |
| 2 | + |
2 | 3 | --- |
3 | 4 |
|
4 | | -React Align Component. Wrapper around https://github.com/yiminghe/dom-align. |
| 5 | +React way perf context selector |
5 | 6 |
|
6 | | -[![NPM version][npm-image]][npm-url] |
7 | | -[![build status][github-actions-image]][github-actions-url] |
8 | | -[![Codecov][codecov-image]][codecov-url] |
9 | | -[![gemnasium deps][gemnasium-image]][gemnasium-url] |
10 | | -[![node version][node-image]][node-url] |
11 | | -[![npm download][download-image]][download-url] |
| 7 | +[![NPM version][npm-image]][npm-url] [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![gemnasium deps][gemnasium-image]][gemnasium-url] [![node version][node-image]][node-url] [![npm download][download-image]][download-url] |
12 | 8 |
|
13 | | -[npm-image]: http://img.shields.io/npm/v/rc-align.svg?style=flat-square |
14 | | -[npm-url]: http://npmjs.org/package/rc-align |
15 | | -[github-actions-image]: https://github.com/react-component/align/workflows/CI/badge.svg |
16 | | -[github-actions-url]: https://github.com/react-component/align/actions |
17 | | -[codecov-image]: https://img.shields.io/codecov/c/github/react-component/align/master.svg?style=flat-square |
18 | | -[codecov-url]: https://codecov.io/gh/react-component/align/branch/master |
19 | | -[gemnasium-image]: http://img.shields.io/gemnasium/react-component/align.svg?style=flat-square |
20 | | -[gemnasium-url]: https://gemnasium.com/react-component/align |
| 9 | +[npm-image]: http://img.shields.io/npm/v/@rc-component/context.svg?style=flat-square |
| 10 | +[npm-url]: http://npmjs.org/package/@rc-component/context |
| 11 | +[github-actions-image]: https://github.com/react-component/context/workflows/CI/badge.svg |
| 12 | +[github-actions-url]: https://github.com/react-component/context/actions |
| 13 | +[codecov-image]: https://img.shields.io/codecov/c/github/react-component/context/master.svg?style=flat-square |
| 14 | +[codecov-url]: https://codecov.io/gh/react-component/context/branch/master |
| 15 | +[gemnasium-image]: http://img.shields.io/gemnasium/react-component/context.svg?style=flat-square |
| 16 | +[gemnasium-url]: https://gemnasium.com/react-component/context |
21 | 17 | [node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square |
22 | 18 | [node-url]: http://nodejs.org/download/ |
23 | | -[download-image]: https://img.shields.io/npm/dm/rc-align.svg?style=flat-square |
24 | | -[download-url]: https://npmjs.org/package/rc-align |
25 | | - |
| 19 | +[download-image]: https://img.shields.io/npm/dm/@rc-component/context.svg?style=flat-square |
| 20 | +[download-url]: https://npmjs.org/package/@rc-component/context |
26 | 21 |
|
27 | 22 | ## Development |
28 | 23 |
|
29 | 24 | ``` |
30 | 25 | npm install |
31 | 26 | npm start |
32 | 27 | ``` |
33 | | - |
34 | | -## Example |
35 | | - |
36 | | -http://localhost:8100/examples/ |
37 | | - |
38 | | -online 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 | | -[](https://npmjs.org/package/rc-align) |
52 | | - |
53 | | -## Usage |
54 | | - |
55 | | -```js |
56 | | -var Align = require('rc-align'); |
57 | | -var ReactDOM = require('react-dom'); |
58 | | -ReactDOM.render(<Align align={{}} target={function(){}}><div></div></Align>, container); |
59 | | -``` |
60 | | - |
61 | | -will 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> |
92 | | - function():HTMLElement || |
93 | | - { pageX: number, pageY: number } || |
94 | | - { clientX: number, clientY: number } |
95 | | - </td> |
96 | | - <td>function(){return window;}</td> |
97 | | - <td> |
98 | | - a function which returned value or point is used for target from https://github.com/yiminghe/dom-align |
99 | | - </td> |
100 | | - </tr> |
101 | | - <tr> |
102 | | - <td>monitorWindowResize</td> |
103 | | - <td>Boolean</td> |
104 | | - <td>false</td> |
105 | | - <td>whether realign when window is resized</td> |
106 | | - </tr> |
107 | | - </tbody> |
108 | | -</table> |
109 | | - |
110 | | - |
111 | | -## License |
112 | | - |
113 | | -rc-align is released under the MIT license. |
0 commit comments