https://github.com/react-component/align

Abstract React Align
https://github.com/react-component/align

Last synced: 4 months ago
JSON representation

Abstract React Align

• Host: GitHub
• URL: https://github.com/react-component/align
• Owner: react-component
• License: mit
• Created: 2015-07-24T09:13:18.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2024-08-18T02:16:41.000Z (over 1 year ago)
• Last Synced: 2025-08-17T23:15:27.750Z (4 months ago)
• Language: TypeScript
• Homepage: http://react-component.github.io/align/
• Size: 2.02 MB
• Stars: 82
• Watchers: 13
• Forks: 53
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Changelog: HISTORY.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# rc-align

---

React Align Component. Wrapper around https://github.com/yiminghe/dom-align.

[![NPM version][npm-image]][npm-url]

[![npm download][download-image]][download-url]

[![build status][github-actions-image]][github-actions-url]

[![Codecov][codecov-image]][codecov-url]

[![bundle size][bundlephobia-image]][bundlephobia-url]

[![dumi][dumi-image]][dumi-url]

[npm-image]: http://img.shields.io/npm/v/rc-align.svg?style=flat-square

[npm-url]: http://npmjs.org/package/rc-align

[travis-image]: https://img.shields.io/travis/react-component/align/master?style=flat-square

[travis-url]: https://travis-ci.com/react-component/align

[github-actions-image]: https://github.com/react-component/align/workflows/CI/badge.svg

[github-actions-url]: https://github.com/react-component/align/actions

[codecov-image]: https://img.shields.io/codecov/c/github/react-component/align/master.svg?style=flat-square

[codecov-url]: https://app.codecov.io/gh/react-component/align

[david-url]: https://david-dm.org/react-component/align

[david-image]: https://david-dm.org/react-component/align/status.svg?style=flat-square

[david-dev-url]: https://david-dm.org/react-component/align?type=dev

[david-dev-image]: https://david-dm.org/react-component/align/dev-status.svg?style=flat-square

[download-image]: https://img.shields.io/npm/dm/rc-align.svg?style=flat-square

[download-url]: https://npmjs.org/package/rc-align

[bundlephobia-url]: https://bundlephobia.com/package/rc-align

[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-align

[dumi-url]: https://github.com/umijs/dumi

[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square

## Development

```

npm install

npm start

```

## Example

http://localhost:8100/examples/

online example: http://react-component.github.io/align/examples/

## Feature

* support ie8,ie8+,chrome,firefox,safari

### Keyboard

## install

[![rc-align](https://nodei.co/npm/rc-align.png)](https://npmjs.org/package/rc-align)

## Usage

```js

var Align = require('rc-align');

var ReactDOM = require('react-dom');

ReactDOM.render(
, container);

```


will align child with target when mounted or align is changed

## API

### props

    

    

        name

        type

        default

        description

    

    

    

        

          align

          Object

          

          same with alignConfig from https://github.com/yiminghe/dom-align

        

        

          onAlign

          function(source:HTMLElement, align:Object)

          

          called when align

        

        

          target

          

              function():HTMLElement || 

              { pageX: number, pageY: number } ||

              { clientX: number, clientY: number }

          

          function(){return window;}

          

            a function which returned value or point is used for target from https://github.com/yiminghe/dom-align

        

        

        

          monitorWindowResize

          Boolean

          false

          whether realign when window is resized

        

    

## License

rc-align is released under the MIT license.