rc-align

What is rc-align?

The rc-align package is a React component that provides functionality for aligning elements relative to other elements. It is useful for creating tooltips, dropdowns, and other UI components that need to be positioned dynamically based on the position of other elements.

What are rc-align's main functionalities?

Basic Alignment

This feature allows you to align an element relative to a target element. In this example, the aligned element is positioned such that its top-left corner is aligned with the bottom-left corner of the target element.

import Align from 'rc-align';

const Example = () => (
  <Align
    target={() => document.getElementById('target-element')}
    align={{ points: ['tl', 'bl'] }}
  >
    <div>Aligned Element</div>
  </Align>
);

Dynamic Alignment

This feature allows for dynamic alignment that adjusts when the window is resized. The aligned element is positioned with an additional offset of 10 pixels below the target element.

import Align from 'rc-align';

const Example = () => (
  <Align
    target={() => document.getElementById('target-element')}
    align={{ points: ['tl', 'bl'], offset: [0, 10] }}
    monitorWindowResize
  >
    <div>Aligned Element</div>
  </Align>
);

Custom Target

This feature allows you to specify a custom target for alignment. Instead of aligning to an existing DOM element, you can provide custom coordinates and dimensions.

import Align from 'rc-align';

const Example = () => (
  <Align
    target={() => ({ left: 100, top: 200, width: 50, height: 50 })}
    align={{ points: ['tl', 'bl'] }}
  >
    <div>Aligned Element</div>
  </Align>
);

Other packages similar to rc-align

react-popper

react-popper is a React wrapper around the Popper.js library, which provides powerful positioning and alignment capabilities. It is more feature-rich compared to rc-align, offering advanced positioning options, modifiers, and better handling of edge cases.

react-overlays

react-overlays is a set of utilities for creating overlays in React, including positioning and alignment. It is similar to rc-align but provides additional components and utilities for managing overlays, making it a more comprehensive solution for complex UI components.

react-bootstrap

react-bootstrap is a popular UI library for React that includes components for positioning and alignment, such as tooltips and popovers. While it offers similar alignment functionalities, it is part of a larger set of UI components, making it a more integrated solution for building complete UIs.

README

rc-align

---

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

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

Usage

var Align = require('rc-align');
var ReactDOM = require('react-dom');
ReactDOM.render(<Align align={{}} target={function(){}}><div></div></Align>, 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.