# @zhangjicheng/react-scroll-wrapper

> react

Latest version **0.0.1-alpha2** (published 2023-08-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install @zhangjicheng/react-scroll-wrapper
pnpm add @zhangjicheng/react-scroll-wrapper
yarn add @zhangjicheng/react-scroll-wrapper
bun add @zhangjicheng/react-scroll-wrapper
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1-alpha2 |
| Published | 2023-08-04 |
| First published | 2023-08-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 23 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | zhangjicheng |
| Maintainers | zhangjicheng |
| Keywords | react, React Dom, animate, typescript, scroller |

## Links

- npm: https://www.npmjs.com/package/@zhangjicheng/react-scroll-wrapper
- Repository: https://github.com/zhangjichengcc/react-scroll-wrapper
- Homepage: https://github.com/zhangjichengcc/react-scroll-wrapper#readme
- Issues: https://github.com/zhangjichengcc/react-scroll-wrapper/issues
- npm.io page: https://npm.io/package/@zhangjicheng/react-scroll-wrapper

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.1-alpha2 (latest) — 2023-08-04
- 0.0.1-alpha1 — 2023-08-04

## README

# ReactScrollWrapper

> 无限滚动的 react 组件，支持横向纵，滚动方向及速度的配置，支持 `typeScript`

## how to use

- use

  ``` shell
  npm i @zhangjicheng/react-scroll-wrapper

  pnpm add @zhangjicheng/react-scroll-wrapper

  yarn add @zhangjicheng/react-scroll-wrapper
  ```

  ``` js
  import ScrollWrapper from '@zhangjicheng/react-scroll-wrapper';

  import ScrollWrapper from '@zhangjicheng/react-scroll-wrapper/dist/components/ScrollWrapper';
  ```

- example

  ``` js
  import { FC } from react;
  import ScrollWrapper from '@zhangjicheng/react-scroll-wrapper';

  const View: FC = () => {

    return (
      <div style={{height: 100}}>
        <ScrollWrapper>
          <ul>
             <li>
                {
                  'ScrollWrapper是一个创建无限滚动效果的功能组件。它包含以下属性:'
                }
              </li>
              <li>{'@param {Props} props - props对象包含以下属性:'}</li>
              <li>{'children: 滚动元素主体.'}</li>
              <li>{'speed: 滚动动画的速度 (default value: 1).'}</li>
              <li>{'direction: 滚动方向 (default value: "bt").'}</li>
              <li>{'direction: 滚动方向 (default value: "bt").'}</li>
              <li>{'onScroll: 滚动回调'}</li>
              <li>{'pauseOnHover: 是否鼠标移入暂停'}</li>
              <li>{'autoScroll: 是否自动滚动'}</li>
              <li>{'disabled: 是否禁用滚动'}</li>
              <li>{'@return {JSX.Element} - 渲染的组件。'}</li>
          </ul>
        </ScrollWrapper>
      <div>
    )
  }

  export default View;

  ```

## ⚠️注意

- 纵向滚动时，当滚动内容高度小于容器高度，则不会滚动; 横向滚动同理；
- 容器高度默认继承父级高度；

---
_Source: https://npm.io/package/@zhangjicheng/react-scroll-wrapper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._