{"id":15837110,"url":"https://github.com/afeiship/react-fly2cart","last_synced_at":"2026-04-30T00:09:25.217Z","repository":{"id":96088507,"uuid":"71329340","full_name":"afeiship/react-fly2cart","owner":"afeiship","description":"Fly to cart effect for react.","archived":false,"fork":false,"pushed_at":"2024-11-06T07:15:40.000Z","size":281,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-07T10:45:42.997Z","etag":null,"topics":["ball","cart","fly","react","virtual"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/afeiship.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-10-19T07:13:29.000Z","updated_at":"2024-11-06T07:15:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"2450d001-884c-4aa9-9bc9-13c66012b21d","html_url":"https://github.com/afeiship/react-fly2cart","commit_stats":{"total_commits":41,"total_committers":1,"mean_commits":41.0,"dds":0.0,"last_synced_commit":"740b3fe03a180243947a8e08c2e3240f71909c50"},"previous_names":["afeiship/react-fly2cart"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afeiship%2Freact-fly2cart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afeiship%2Freact-fly2cart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afeiship%2Freact-fly2cart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afeiship%2Freact-fly2cart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/afeiship","download_url":"https://codeload.github.com/afeiship/react-fly2cart/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246671119,"owners_count":20815104,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ball","cart","fly","react","virtual"],"created_at":"2024-10-05T15:20:58.340Z","updated_at":"2026-04-30T00:09:18.176Z","avatar_url":"https://github.com/afeiship.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-fly2cart\n\u003e Fly to cart effect for react.\n\n[![version][version-image]][version-url]\n[![license][license-image]][license-url]\n[![size][size-image]][size-url]\n[![download][download-image]][download-url]\n\n## installation\n```shell\nnpm install -S @jswork/react-fly2cart\n```\n\n## usage\n1. import css\n  ```scss\n  @import \"~@jswork/react-fly2cart/dist/style.css\";\n\n  // or use sass\n  @import \"~@jswork/react-fly2cart/dist/style.scss\";\n  ```\n2. import js\n  ```js\n  import cx from 'classnames';\n  import ReactFly2Cart from '@jswork/react-fly2cart/main';\n  import '@jswork/react-fly2cart/dist/style.scss';\n  import { useState } from 'react';\n  import { useCommand } from '@jswork/react-fly2cart/src/main';\n\n  function App() {\n    const [num, setNum] = useState(0);\n    const [dir, setDir] = useState('top');\n    const { fly2cart } = useCommand('minus');\n    const [disabled, setDisabled] = useState(false);\n    return (\n      \u003cdiv className=\"m-10 p-4 shadow bg-gray-100 text-gray-800 h-100 hover:shadow-md transition-all\"\u003e\n        \u003cnav className=\"x-2\"\u003e\n          \u003cbutton\n            disabled={dir === 'top'}\n            className=\"btn btn-sm btn-secondary\"\n            onClick={() =\u003e setDir('top')}\u003e\n            Top\n          \u003c/button\u003e\n          \u003cbutton\n            disabled={dir === 'bottom'}\n            className=\"btn btn-sm btn-secondary\"\n            onClick={() =\u003e setDir('bottom')}\u003e\n            Bottom\n          \u003c/button\u003e\n        \u003c/nav\u003e\n        \u003cdiv className=\"badge badge-warning absolute right-0 top-0 m-4\"\u003eBuild Time: {BUILD_TIME}\u003c/div\u003e\n        \u003cdiv\n          className={cx(\n            'the-cart bg-green-400 size-16 rounded-full flex justify-center items-center right-10 abs',\n            {\n              'top-10': dir === 'top',\n              'bottom-10': dir === 'bottom',\n            }\n          )}\u003e\n          List:\n          {num}\n        \u003c/div\u003e\n        {dir === 'bottom' \u0026\u0026 (\n          \u003cReactFly2Cart\n            target=\".the-cart\"\n            direction=\"bottom\"\n            className=\"abs top-100\"\n            onClick={() =\u003e setNum(num + 1)}\u003e\n            \u003cbutton className=\"btn btn-sm btn-error\"\u003eBuy To Button\u003c/button\u003e\n          \u003c/ReactFly2Cart\u003e\n        )}\n        {dir === 'top' \u0026\u0026 (\n          \u003c\u003e\n            \u003cReactFly2Cart\n              target=\".the-cart\"\n              flyNode={\n                \u003cimg src=\"https://pic.rmb.bdstatic.com/7f7a8d7b247d3aa430010f10a5765239.jpeg\" /\u003e\n              }\n              className=\"abs top-100 left-100\"\n              onClick={() =\u003e setNum(num + 1)}\u003e\n              \u003cbutton className=\"btn btn-sm btn-primary\"\u003eBuy Now\u003c/button\u003e\n            \u003c/ReactFly2Cart\u003e\n            \u003cReactFly2Cart\n              name=\"minus\"\n              target=\".the-cart\"\n              manually\n              className=\"abs top-80\"\n              onClick={() =\u003e {\n                setNum(num - 1);\n                setDisabled(true);\n                setTimeout(() =\u003e {\n                  fly2cart();\n                  setDisabled(false);\n                }, 1000);\n              }}\u003e\n              \u003cbutton disabled={disabled} className=\"btn btn-sm btn-secondary\"\u003e\n                {disabled ? 'Loading...' : 'Minus Async'}\n              \u003c/button\u003e\n            \u003c/ReactFly2Cart\u003e\n          \u003c/\u003e\n        )}\n      \u003c/div\u003e\n    );\n  }\n\n  export default App;\n  ```\n\n## preview\n- https://afeiship.github.io/react-fly2cart/\n\n## license\nCode released under [the MIT license](https://github.com/afeiship/react-fly2cart/blob/master/LICENSE.txt).\n\n[version-image]: https://img.shields.io/npm/v/@jswork/react-fly2cart\n[version-url]: https://npmjs.org/package/@jswork/react-fly2cart\n\n[license-image]: https://img.shields.io/npm/l/@jswork/react-fly2cart\n[license-url]: https://github.com/afeiship/react-fly2cart/blob/master/LICENSE.txt\n\n[size-image]: https://img.shields.io/bundlephobia/minzip/@jswork/react-fly2cart\n[size-url]: https://github.com/afeiship/react-fly2cart/blob/master/dist/react-fly2cart.min.js\n\n[download-image]: https://img.shields.io/npm/dm/@jswork/react-fly2cart\n[download-url]: https://www.npmjs.com/package/@jswork/react-fly2cart\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafeiship%2Freact-fly2cart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fafeiship%2Freact-fly2cart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafeiship%2Freact-fly2cart/lists"}