https://github.com/afeiship/react-fly2cart
Fly to cart effect for react.
https://github.com/afeiship/react-fly2cart
ball cart fly react virtual
Last synced: about 1 month ago
JSON representation
Fly to cart effect for react.
- Host: GitHub
- URL: https://github.com/afeiship/react-fly2cart
- Owner: afeiship
- Created: 2016-10-19T07:13:29.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2024-11-06T07:15:40.000Z (over 1 year ago)
- Last Synced: 2025-02-07T10:45:42.997Z (over 1 year ago)
- Topics: ball, cart, fly, react, virtual
- Language: TypeScript
- Homepage:
- Size: 274 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-fly2cart
> Fly to cart effect for react.
[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]
## installation
```shell
npm install -S @jswork/react-fly2cart
```
## usage
1. import css
```scss
@import "~@jswork/react-fly2cart/dist/style.css";
// or use sass
@import "~@jswork/react-fly2cart/dist/style.scss";
```
2. import js
```js
import cx from 'classnames';
import ReactFly2Cart from '@jswork/react-fly2cart/main';
import '@jswork/react-fly2cart/dist/style.scss';
import { useState } from 'react';
import { useCommand } from '@jswork/react-fly2cart/src/main';
function App() {
const [num, setNum] = useState(0);
const [dir, setDir] = useState('top');
const { fly2cart } = useCommand('minus');
const [disabled, setDisabled] = useState(false);
return (
setDir('top')}>
Top
setDir('bottom')}>
Bottom
Build Time: {BUILD_TIME}
List:
{num}
{dir === 'bottom' && (
setNum(num + 1)}>
Buy To Button
)}
{dir === 'top' && (
<>
}
className="abs top-100 left-100"
onClick={() => setNum(num + 1)}>
Buy Now
{
setNum(num - 1);
setDisabled(true);
setTimeout(() => {
fly2cart();
setDisabled(false);
}, 1000);
}}>
{disabled ? 'Loading...' : 'Minus Async'}
>
)}
);
}
export default App;
```
## preview
- https://afeiship.github.io/react-fly2cart/
## license
Code released under [the MIT license](https://github.com/afeiship/react-fly2cart/blob/master/LICENSE.txt).
[version-image]: https://img.shields.io/npm/v/@jswork/react-fly2cart
[version-url]: https://npmjs.org/package/@jswork/react-fly2cart
[license-image]: https://img.shields.io/npm/l/@jswork/react-fly2cart
[license-url]: https://github.com/afeiship/react-fly2cart/blob/master/LICENSE.txt
[size-image]: https://img.shields.io/bundlephobia/minzip/@jswork/react-fly2cart
[size-url]: https://github.com/afeiship/react-fly2cart/blob/master/dist/react-fly2cart.min.js
[download-image]: https://img.shields.io/npm/dm/@jswork/react-fly2cart
[download-url]: https://www.npmjs.com/package/@jswork/react-fly2cart