Framer Motion RAC wrappers

[devongovett]

Being able to control the rendered internal component is pretty important in order to use libraries like framer-motion or even styled components (for example support for an as prop or even an asChild like radix does).

I think the DOM structure may be a little more opinionated than some other libraries because we do have the hooks to fall back to if you need something really custom. However, I agree for common cases this is important. For framer-motion and styled components I think you'd probably wrap the React Aria Components rather than the DOM elements instead. For example:

Thanks @devongovett

I am loving react-aria-components so far. However, when trying to use framer-motion I think I am running into a limitation of not being able to set the underlying component that is being rendered.

I can do const AnimatedButton = motion(Button); as you proposed, however, what if I want the animation to depend on the hover / press states and animate the actual <button/> element this way. I have no access to those properties wheras support for as / componentType / elementType / component or an asChild-method , will allow me wrap a native button element (or in this case motion.button) and check the data/aria attributes in that wrapper to set the animation.

I am aware I can go back to using the react-aria hooks, but having built a design system on top of both the hooks, and the RAC, I can say the RAC is much much nicer to work with.

Aside from this issue , and some internals of the RAC table, I haven't come accross limitations of the RCA so far. I really don't want to go give up RAC :)

Originally posted by @jrmyio in #4058 (comment)

[devongovett]

@jrmyio maybe I'm misunderstanding, but I think motion(Button) should already work for this? It should work the same way as any other DOM element, e.g. motion.button. You'll get all of the additional props that framer motion supports, like hover, drag, etc. Could you give me an example of what's not working?

[jrmyio]

Thanks for opening the discussion. By states I mean the render props that react-aria-components provides (not the framer motion props). So for buttons:

react-spectrum/packages/react-aria-components/src/Button.tsx

Lines 17 to 43 in 53389e3

	export interface ButtonRenderProps {
	/**
	* Whether the button is currently hovered with a mouse.
	* @selector [data-hovered]
	*/
	isHovered: boolean,
	/**
	* Whether the button is currently in a pressed state.
	* @selector [data-pressed]
	*/
	isPressed: boolean,
	/**
	* Whether the button is focused, either via a mouse or keyboard.
	* @selector :focus
	*/
	isFocused: boolean,
	/**
	* Whether the button is keyboard focused.
	* @selector [data-focus-visible]
	*/
	isFocusVisible: boolean,
	/**
	* Whether the button is disabled.
	* @selector :disabled
	*/
	isDisabled: boolean
	}

Since these are created inside the react aria component you cannot access them inside your <AnimatedButton/> to drive your animation.

react-spectrum/packages/react-aria-components/src/Button.tsx

Lines 82 to 83 in 53389e3

	let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);
	let {hoverProps, isHovered} = useHover(props);

I really like the way we can use the render props to act based on these react-aria-component's RenderProps but it would have been awesome if there was a way so one can do something like this:

<Button onPress={console.log} asChild>
     {(renderProps, buttonProps) => 
         <motion.button animate={{ 
                 // something based on renderProps
          }} {...buttonProps}>Click me</motion.button>
      }
</Button>

Where the above code would not render the native dom <button/> element inside <Button/> but just pass the dom props as the second argument. This way would also play nice with typescript.

[devongovett]

Hmm yeah that's an interesting usecase. Ideally you could pass a function to animate to access the states like you can with className and style. I'm not a huge fan of as/asChild due to some issues/complexities so I've been trying to avoid adding them, but will need to think about how to handle this case.

[selrond]

@devongovett has there been any movement in this direction since posting this?