Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add containerStyle property to <TinderCard/> element #133

Open
DoxasticFox opened this issue Dec 25, 2022 · 0 comments
Open

Add containerStyle property to <TinderCard/> element #133

DoxasticFox opened this issue Dec 25, 2022 · 0 comments

Comments

@DoxasticFox
Copy link

I can't be bothered raising a PR, but here's the patch I used:

diff --git a/node_modules/react-tinder-card/index.d.ts b/node_modules/react-tinder-card/index.d.ts
index dee80d9..0f252e9 100644
--- a/node_modules/react-tinder-card/index.d.ts
+++ b/node_modules/react-tinder-card/index.d.ts
@@ -80,6 +80,11 @@ declare interface Props {
    */
   className?: string
 
+  /**
+   * Style to add to the container.
+   */
+  containerStyle?: React.CSSProperties
+
   /**
    * The children passed in is what will be rendered as the actual Tinder-style card.
    */
diff --git a/node_modules/react-tinder-card/index.js b/node_modules/react-tinder-card/index.js
index 7746348..3daed73 100644
--- a/node_modules/react-tinder-card/index.js
+++ b/node_modules/react-tinder-card/index.js
@@ -85,7 +85,7 @@ const AnimatedDiv = animated.div
 
 const TinderCard = React.forwardRef(
   (
-    { flickOnSwipe = true, children, onSwipe, onCardLeftScreen, className, preventSwipe = [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled },
+    { flickOnSwipe = true, children, onSwipe, onCardLeftScreen, className, preventSwipe = [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled, containerStyle },
     ref
   ) => {
     const [{ xyrot }, setSpringTarget] = useSpring(() => ({
@@ -247,7 +247,8 @@ const TinderCard = React.forwardRef(
         ref: element,
         className,
         style: {
-          transform: xyrot.to((x, y, rot) => `translate3d(${x}px, ${y}px, ${0}px) rotate(${rot}deg)`)
+          transform: xyrot.to((x, y, rot) => `translate3d(${x}px, ${y}px, ${0}px) rotate(${rot}deg)`),
+          ...containerStyle
         },
         children
       })
diff --git a/node_modules/react-tinder-card/index.native.js b/node_modules/react-tinder-card/index.native.js
index f443f57..4cd45c5 100644
--- a/node_modules/react-tinder-card/index.native.js
+++ b/node_modules/react-tinder-card/index.native.js
@@ -86,7 +86,7 @@ const AnimatedView = animated(View)
 
 const TinderCard = React.forwardRef(
   (
-    { flickOnSwipe = true, children, onSwipe, onCardLeftScreen, className, preventSwipe = [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled },
+    { flickOnSwipe = true, children, onSwipe, onCardLeftScreen, className, preventSwipe = [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled, containerStyle },
     ref
   ) => {
     const [{ x, y, rot }, setSpringTarget] = useSpring(() => ({
@@ -208,7 +208,8 @@ const TinderCard = React.forwardRef(
             { translateX: x },
             { translateY: y },
             { rotate: rot.to((rot) => `${rot}deg`) }
-          ]
+          ],
+          ...containerStyle
         }}
         className={className}
       >
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant