Animating Reactstrap components

[Stahlion]

Hey, Thanks for an awesome package azazdeaz!

Reading your answers in here https://github.com/azazdeaz/react-gsap-enhancer/issues/3, is it then true that I cannot use & animate e.g. Reactstrap components (like Card) with react-gsap-enhancer? Meaning, you can ONLY apply the package on primitive tags like divs and spans etc(?)

I'm getting a bunch of

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of 'GSAP(Box)'.
    in Card (at Box.js:32)
    in div (at Box.js:31)
    in GSAP(Box) (at index.js:10)

..when doing:

render() {
    return (
      <div>
        <Card>{this.props.name}</Card>
      </div>
    );
}
export default GSAP()(Box);

Guess it will work anyway being only warnings and all though..

[davidwieler]

Seeing the same thing myself

[ghost]

+1

[benstepp]

Some of the reactstrap components support the innerRef attribute which allows you to ref the DOM node of the rendered component. In your specific example using <Card /> it does not. However, you should be able to get around this by using the tag attribute and passing a custom component.

import { Card } from 'reactstrap'

const MagicalDiv = ({ innerRef, ...rest }) => <div ref={innerRef} {...rest} />
export default class RefableCard extends React.Component {
  render() {
    <Card {...this.props} tag={MagicalDiv} />
  }
}

This is just a wrapper around the reactstrap card that knows how to pass the prop innerRef to the rendered DOM card. Definitely not ideal, but it should work to give you refs to DOM nodes. You would import it and use it exactly like a card, but you can now pass innerRef to the <Card /> and get a DOM node.

---

They have an open issue: reactstrap/reactstrap#877 talking about refs.