slides-react

slides-react react and use ts writer

Usage no npm install needed!

<script type="module">
  import slidesReact from 'https://cdn.skypack.dev/slides-react';
</script>

README

slides-react

一个npm包，使用 react 来实现的轮播图的 DOM 更新，我们没有使用定时器来实现， 使用了最新的CSS3 transition 和 transform 来实现轮播图的循环， 我们的项目还处于完善阶段，欢迎进行 fork。

项目演示地址：slides-react

安装

使用命令 npm add slides-react 或者 yarn add slides-react 来安装在你的项目依赖里

使用

import * as React from "react";
import * as ReactDOM from "react-dom";
import * as Slides from "./package";

import "./css/index.css";

const {
  SlideBox,
  SlideControl,
  SlideList,
  SlidePager,
} = Slides;

const list = [{
  href: "",
  src: require("./img/slides-img-1.jpg"),
}, {
  href: "",
  src: require("./img/slides-img-2.jpg"),
}, {
  href: "",
  src: require("./img/slides-img-3.jpg"),
}];

const App = () => <SlideBox list={list}>
  <SlideList />
  <SlidePager activeStyle={{ backgroundColor: "blue" }} />
  <SlideControl />
</SlideBox>;

ReactDOM.render(
  <App /> as any,
  document.getElementById("root")
);

提示

  1. 如果 SlideBox.children 下没有 SlideList，将使用默认的 SlideList。
  2. SlidePager, SlideControl 组件是可选的。

类型或者参数

declare type Direction = "left" | "right";
interface IOptions {
    direction?: Direction;
    duration?: string;
    timeout?: number;
}

interface ISlideListItem {
  src: string;
  href: string;
  alt?: string;
}

interface IProps {
  list: ISlideListItem[];
  options?: IOptions;
}

declare class SlideBox extends React.Component<IProps, IState> {
    constructor(props: IProps);
    componentDidMount(): void;
    render(): JSX.Element;
    ...
}

interface ISlidePagerProps {
    list?: ISlideListItem[];
    activeStyle?: React.CSSProperties;
}
declare const SlidePager: React.FunctionComponent<ISlidePagerProps>;

interface ISlideListProps {
    list?: ISlideListItem[];
}
declare const SlideList: React.FunctionComponent<ISlideListProps>;

interface ISlideControlProps {
    onPrev?: () => void;
    onNext?: () => void;
    onStop?: () => void;
    onStart?: () => void;
}
declare const SlideControl: React.FunctionComponent<ISlideControlProps>;

仓库地址

我们的仓库地址在码云上托管，使用列子你可以 clone 下来查看 slides-react

更新日志

  1. v1.0.0
  • 1.0.0 正式版发布了
  • 产品基本成型
  1. v2.0.0
  • 2.0.0 版本发布了
  • 内部轮播方式大修改
  • 接口 props 也修改了
  • 支持 手动轮播了(左右翻页)
  1. v2.0.1
  • 修改 README.md 里的命名错误
  1. v3.0.0
  • 组件命名大更新
  • 优化代码结构