react-rowboat🚣

构建原始、简单、可扩展的react slide | carousel组件

使用场景

如果您需要在网页中构建slide | carousel组件，并且希望它灵活且简单。您可以尝试使用它

实现原理

react-rowboat使用了React Render Props模式最大程度的减少API，为您自定义组件提供了最大的灵活性。因为所有的组件内容和样式都是您自己负责渲染。

安装

npm install --save react-rowboat

使用

建议保持getContainerProps和getWrapperProps行div所在的层级关系，因为它们有一些基本的样式依赖，除此之外您可以渲染任意的内容。

import React from 'react'
import ReactDOM from 'react-dom'
import RowBoat from "react-rowbot";
 
const items = [
  "img src1",
  "img src2",
  "img src3"
];
ReactDOM.render(
  <RowBoat
    length={items.length}
    loop
  >
    {({
      index,
      setIndex,
      getContainerProps,
      getWrapperProps,
      getItemProps
    }) => {
      return (
        <div className="slide" {...getContainerProps()}>
          <div className="prev" onClick={() => setIndex(index - 1)}>
            prev
          </div>
          <div className="next" onClick={() => setIndex(index + 1)}>
            next
          </div>
          <div {...getWrapperProps()}>
            {items.map((v, vIndex) => {
              return (
                <div
                  key={vIndex}
                  className={`slide-item ${
                    index - 1 === vIndex ? "actives" : ""
                  }`}
                  {...getItemProps()}
                >
                  <img src={v} alt="" />
                </div>
              );
            })}
          </div>
        </div>
      );
    }}
  </RowBoat>,
  document.getElementById("root")
)

基础属性

下面列举出了所有RowBoat组件所能使用的属性

children

function({}) | required

接收一个函数类型，它应该返回您所需要的组件。

length

number | required

length用于边界判断，一般使用items.length的属性即可

defaultIndex

number/null | 默认为1

用于设置默认的index索引

speed

number/null | 默认为300, 单位为ms

用于控制播放的时间间隔，单位为ms

loop

bool/null | 默认为false

用于设置当index到达末尾时是否重新设置为1

direction

string/null | 默认为horizontal

有两种模式可以选择，您可以通过下面的方式引入

import RowBoat, { HORIZONTAL, VERTICAL } from "rect-rowboat";

HORIZONTAL为水平动画模式，VERTICAL为垂直动画模式

drag

bool/null | 默认为false

如果给定drag参数则可以使用鼠标拖动切换

autoplay

bool/null | 默认为false

如果传递此属性，react-rowboat将会自动播放

delay

number/null | 默认为3000，单位为ms

用于控制自动播放的时间间隔，单位为ms

Children Function

您可以像下面这样去使用Render Props， 强烈推荐保持如下的页面结构

<RowBoat
  length={items.length}
>
  {({
    index,
    setIndex,
    getContainerProps,
    getWrapperProps,
    getItemProps
  }) => {
    return (
      <div {...getContainerProps()}>
        <div {...getWrapperProps()}>
          {items.map((v, vIndex) => <div>{/* 你的jsx组件代码 */}</div>)}
        </div>
      </div>
    );
  }}
</RowBoat>

在这里对React Render Props模式所能使用的参数进行说明

属性	类型	描述
index	number	当前正在显示中的索引
setIndex	func	设置index的值
getContainerProps	func	返回容器元素必须的属性
getWrapperProps	func	返回包装元素必须的属性
getItemProps	func	返回项目元素必须的属性

License

MIT © https://github.com/monsterooo