{"_id":"@dooboo-ui/tinder-card","_rev":"5-2d723f13c7f3eafb85711716a24eeeb4","name":"@dooboo-ui/tinder-card","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@dooboo-ui/tinder-card","main":"lib/index.js","types":"lib/index.d.ts","version":"0.0.1","license":"MIT","postinstall":"tsc","scripts":{"build":"rm -rf ./lib && tsc","watch":"tsc -w"},"repository":{"type":"git","url":"git+https://github.com/dooboolab/dooboo-ui.git","directory":"src/components/shared/TinderCard"},"bugs":{"url":"https://github.com/dooboolab/dooboo-ui/issues"},"homepage":"https://github.com/dooboolab/dooboo-ui#readme","dependencies":{"dooboolab-welcome":"^1.1.1"},"devDependencies":{"styled-components":"^4.4.0","typescript":"^3.7.5"},"peerDependencies":{"react":">=16.8","react-native":">=0.59","styled-components":">=4.4.0"},"publishConfig":{"access":"public"},"keywords":["swtich-toggle","react-hook","react-native","dooboo-ui/native","dooboolab"],"description":"## Preview","_id":"@dooboo-ui/tinder-card@0.0.1","_nodeVersion":"12.14.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-2mWrud0oihjy1Ca1kN5kVeBp8Yjr4o0bmSEiUF+Od6jYJcing3wlFk41vffqT4TON+QtS3i2GhhPttuwjZlADQ==","shasum":"a854f3a3ec7ca87af473ed1ada2e94a309561409","tarball":"https://registry.npmjs.org/@dooboo-ui/tinder-card/-/tinder-card-0.0.1.tgz","fileCount":9,"unpackedSize":503796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6tYeCRA9TVsSAnZWagAASQsP/i4aSJb8Zo+aSRKehiC6\n2VrpJQOvVonQ/F0uYARZEC5774tAhZQgla/dLd9yAMpt9Wq0b6Qf6Y1ry2tI\nzNss21wMabP6yxzaOXPBRNN9IJF5J7aT1XquAXnbRYhaqD5XxlMWYfssdmM/\n53+0d9cy/xWpXx/JcjZSntgVAz+iJexaVn9BrY57ETUAONeCwIBeOFM7JLdR\nLt8LfmKb05RmVS2AFL496x+HL5APjAoQPAS3bKfgDwRfltDFycFs0eNQzuw0\nr7qOj8GmwTg06ariN/53oCmTJ3I0VKJtPwkBGHxwvuNw9nG73VVz15ejoZf4\nCLv1xxe68i7Zm2Is4U8ajev2smlZOxKmsGUh/zi2IZVzS6X6M1h8z31grQ0u\n7Wk2NHqMbYbpmyzFZH/gu0FNEIbczS3ATNdU8HYqg2LeUbgmXWczCuPAc+XA\n8RqLhRBT4R6Uqs+pZFQ6YyBcLoTmRaLIJf9LkaqFp9tGflokGT4Q91J5vdJX\nE5lYhR9JFYx5OTBdCmkxzJIGB6rCxIgz/TIKC7bJDC8Z3e9fElGqaQyHzauT\nKzmGVJJ7fu9mjIx4D7O5j2kPj22fYc94SIXPZHu4L68vYeFS1WjFS820c8yf\nyHGi+AUBH82/T68upUS5a2TsA3sTJYthjzJOy6LxECyi1x6hRoDMyfYDDYxY\n7jFH\r\n=1eCm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEYugyOPSSDVH9NJcrFLf6Z9mKBx/MhobkmvDoPWAWgzAiEAsjx25tpZ83X7jC3v3FTeyY0BP3SooYD9PItP/Pa7kQI="}]},"maintainers":[{"name":"dooboolab","email":"dooboolab@gmail.com"}],"_npmUser":{"name":"dooboolab","email":"dooboolab@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tinder-card_0.0.1_1592448541650_0.24740935545969456"},"_hasShrinkwrap":false}},"time":{"created":"2020-06-18T02:49:01.209Z","0.0.1":"2020-06-18T02:49:01.759Z","modified":"2022-04-05T05:16:10.460Z"},"maintainers":[{"email":"lastchoice86@naver.com","name":"jongtaek"},{"email":"do02reen24@gmail.com","name":"do02reen24"},{"email":"dooboolab@gmail.com","name":"dooboolab"}],"description":"## Preview","homepage":"https://github.com/dooboolab/dooboo-ui#readme","keywords":["swtich-toggle","react-hook","react-native","dooboo-ui/native","dooboolab"],"repository":{"type":"git","url":"git+https://github.com/dooboolab/dooboo-ui.git","directory":"src/components/shared/TinderCard"},"bugs":{"url":"https://github.com/dooboolab/dooboo-ui/issues"},"license":"MIT","readme":"# TinderCard\n\n## Preview\n\n![TinderCard](https://user-images.githubusercontent.com/31176502/73652277-e4402000-46c9-11ea-9139-b1e453c95a6e.gif)\n\n## Props\n\n|                        | types                     | description          | required | default |\n| ---------------------- | ------------------------- | -------------------- | -------- | ------- |\n| testID                 | string                    |                      |          |         |\n| errorTestID            | string                    |                      |          |         |\n| data                   | T[ ]                      |                      |          |         |\n| renderCards            | (item: T) => ReactElement |                      |          |         |\n| renderNoMoreCards      | ( ) => ReactElement       |                      |          |         |\n| onSwipeRight           | (item: T) => void         |                      |          |         |\n| onSwipeLeft            | (item: T) => void         |                      |          |         |\n| onCancel               | ( ) => void               |                      |          |         |\n| swipeRightLabelElement | ( ) => ReactElement       |                      |          |         |\n| swipeLeftLabelElement  | ( ) => ReactElement       |                      |          |         |\n| swipeRightLabelStyle   | ViewStyle                 |                      |          |         |\n| swipeLeftLabelStyle    | ViewStyle                 |                      |          |         |\n| swipeLabelAlignStyle   | ViewStyle                 |                      |          |         |\n| containerStyle         | ViewStyle                 |                      |          |         |\n| frontCardStyle         | ViewStyle                 |                      |          |         |\n| backCardsStyle         | ViewStyle                 |                      |          |         |\n| shouldRotate           | ViewStyle                 |                      |          |         |\n\n## Getting started\n\n### Installation\n\n```sh\nyarn add @dooboo-ui/core\n```\n\n### Import\n\n  ```javascript\n  import { TinderCard } from '@dooboo-ui/core';\n  import { TinderCardDirection, TinderCardRef } from '@dooboo-ui/core/lib/TinderCard';\n  ```\n\n  ##### TinderCard\n  - TinderCard Component\n  - Example\n\n    ```\n    <TinderCard\n        testID=\"tinderCard\"\n        ref={tinderCard}\n        onSwipeRight={handleUnlike}\n        onSwipeLeft={handleLike}\n        onCancel={handleCancel}\n        data={data}\n        renderCards={_renderCards}\n        renderNoMoreCards={_renderNoMoreCards}\n        containerStyle={{ width: 300, height: 500 }}\n        shouldRotate\n        swipeRightLabelElement={(): ReactElement => <LikeLabel>Like!</LikeLabel>}\n        swipeLeftLabelElement={(): ReactElement => \n          <UnlikeLabel>Unlike!</UnlikeLabel>\n        }\n        swipeLabelAlignStyle={{ justifyContent: 'center', alignItems: 'center' }}\n    />\n    ```\n\n  ##### TinderCardDirection\n  - You can use this by importing on `@dooboo-ui/core/lib/TinderCard` \n  - Structure\n      if you put swiping direction on event function, you can use this. For example, `TinderCardDirection.RIGHT` or `TinderCardDirection.LEFT`\n\n      ```\n      {\n        RIGHT = 'right',\n        LEFT = 'left'\n      }\n      ```\n\n  ##### TinderCardRef\n  - This make us to use function in `TinderCard`.\n\n    ```\n      {\n        handleCancel: () => void;\n        forceSwipe: (direction: TinderCardDirection) => void;\n      }\n    ```\n  - Usage\n    \n    1. Import module `TinderCardRef` \n        First of all, you should import module `TinderCardRef` in `@dooboo-ui/core/lib/TinderCard`.\n        ```\n        import { TinderCardRef } from '@dooboo-ui/core/lib/TinderCard';\n        ```\n    2. Allocate `useRef()` having type `TinderCardRef` Object.\n        ```\n        import React, { useRef } from 'react';\n\n        ...\n\n        const tinderCard = useRef<TinderCardRef>(null);\n        ```\n    3. Write this where you want to use.\n        ```\n        <TouchableOpacity\n          onPress={(): void => {\n            tinderCard.current.forceSwipe(TinderCardDirection.LEFT);\n          }}\n        >\n          Button\n        </TouchableOpacity>\n        ```\n\n        If you are difficult to understand `useRef`, you can read [this tutorial](https://medium.com/dooboolab/vexposing-child-functions-using-imperativehandle-and-forwardref-69b3687808bb).\n\n#### Declare interface `T` for props `data`.\n  ```\n  interface Item {\n    id: string;\n    title: string;\n    content: string;\n    image: ImageSourcePropType;\n  }\n  ``` \n\n### Full code of example\n\n  ```javascript\n  import { TinderCard } from '@dooboo-ui/core';\n  import { TinderCardDirection, TinderCardRef } from '@dooboo-ui/core/lib/TinderCard';\n\n  interface Item {\n    id: string;\n    title: string;\n    content: string;\n    image: ImageSourcePropType;\n  }\n\n  function Page(): React.ReactElement {\n      const tinderCard = useRef<TinderCardRef>(null);\n\n      return (\n        <Container>\n          <TinderCard\n            testID=\"tinderCard\"\n            ref={tinderCard}\n            onSwipeRight={handleUnlike}\n            onSwipeLeft={handleLike}\n            onCancel={handleCancel}\n            data={data}\n            renderCards={_renderCards}\n            renderNoMoreCards={_renderNoMoreCards}\n            containerStyle={{ width: 300, height: 500 }}\n            shouldRotate\n            swipeRightLabelElement={(): ReactElement => <LikeLabel>Like!</LikeLabel>}\n            swipeLeftLabelElement={(): ReactElement => <UnlikeLabel>Unlike!</UnlikeLabel>}\n            swipeLabelAlignStyle={{ justifyContent: 'center', alignItems: 'center' }}\n          />\n          <View style={{\n            position: 'absolute',\n            bottom: 0,\n            flexDirection: 'row',\n            width: '100%',\n            justifyContent: 'space-between',\n          }}>\n\n            <ButtonWrapper\n              style={{ backgroundColor: '#ff7676' }}\n              onPress={(): void => {\n                tinderCard.current.forceSwipe(TinderCardDirection.LEFT);\n              }}\n            >\n              <StyledText style={{ fontSize: 15 }}>UNLIKE</StyledText>\n            </ButtonWrapper>\n\n            <ButtonWrapper\n              onPress={(): void => {\n                tinderCard.current.handleCancel();\n              }}\n            >\n              <StyledText style={{ fontSize: 15 }}>UNDO</StyledText>\n            </ButtonWrapper>\n\n            <ButtonWrapper\n              style={{ backgroundColor: '#44d1a6' }}\n              onPress={(): void => {\n                tinderCard.current.forceSwipe(TinderCardDirection.RIGHT);\n              }}\n            >\n              <StyledText style={{ fontSize: 15 }}>LIKE</StyledText>\n            </ButtonWrapper>\n          </View>\n        </Container>\n      );\n  }\n\n  export default Page;\n  ```\n","readmeFilename":"README.md"}