Package Exports

react-twentytwenty

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-twentytwenty) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React TwentyTwenty

A TwentyTwenty component for React

npm install --save react-twentytwenty

Demo (with cats)

Images can be different sizes
Only uses valid CSS1, so works on older browsers
- Doesn't use clip
Mobile Friendly

Docs

TL;DR,

<TwentyTwenty>
  <img src="left" />
  <img src="right" />
</TwentyTwenty>

Properties

verticalAlign: One of 'top', 'middle', or 'bottom'
leftHorizontalAlign: One of 'left', 'center', or 'right'
rightHorizontalAlign: One of 'left', 'center', or 'right'

Slider

You can include a third child to be a slider. The slider is placed inside a zero-width, full height element, positioned to the correct left offset: basically just set height: 100% on your slider.

<TwentyTwenty>
  <img src="left" />
  <img src="right" />
  <div className="slider" />
</TwentyTwenty>

.slider {
  height: 100%;
  width: 1px;
  background: mediumaquamarine;
}