rc-camera

---

React Camera Component.

Base on Camera.

Feature

• support ie8,ie8+,chrome,firefox,safari(basic usage)

• support edge,chrome,firefox,safari,opera(some transform animations)

install

Usage

import Camera from "rc-camera";
import "rc-camera/assets/index.css"

const imgList = [{ img: "", content: "" }];

ReactDOM.render(<Camera imgList={imgList} />, mountNode);

API

props

name	type	default	description
width	String	100%	Camera container width
aspectRatio	Number	0.5	The ratio of height / width. You can fit width and height.
prefixCls	String	rc-camera	PrefixCls of css
imgList	Array	[{}]	Set imgs of Camera.
current	Number	0	Set the current img of Camera.
slideOn	String	random	The slide target of the animation: random prev next.
animateType	String	random	The animation type.
duration	Number	1000	Animation duration(ms).
easing	String	cubic-bezier(0.77, 0, 0.175, 1)	Animation easing.
contentBar	(content) => React.ReactNode		ContentBar of Camera. You will get each img content when sliding.
contentBarWrapStyle	Obejct	{}	ContentBarWrap style. You can change wrapper background.
prevBtn	ReactNode		The prev Button of Camera.
nextBtn	ReactNode		The next Button of Camera.
pagination	Boolean	true	Pagination of Camera.
autoPlay	Boolean	false	Whether to auto play the Camera.
autoPlayTime	Number	5000	The interval time of autoPlay
showThumbnail	Boolean	true	Whether to show thumbnail when hover the pagination.
onChange	Function(current, nextIndex, isAuto)		Callback executed when slide to next img.
onAnimationOver	Function(current)		Callback executed when the animation is over.

Development

npm install
npm start

Example

http://localhost:8007/examples/default.html

online example: https://yhspehy.github.io/rc-camera/examples/

License

rc-camera is released under the MIT license.