diff --git a/.changeset/animated-className.md b/.changeset/animated-className.md new file mode 100644 index 0000000000..776871180c --- /dev/null +++ b/.changeset/animated-className.md @@ -0,0 +1,5 @@ +--- +'@react-spring/web': patch +--- + +fix: recognize `className` prop to `AnimatedComponent`s diff --git a/targets/web/src/animated.test.tsx b/targets/web/src/animated.test.tsx index 7503f0fb42..6c7cf2c5dc 100644 --- a/targets/web/src/animated.test.tsx +++ b/targets/web/src/animated.test.tsx @@ -106,6 +106,16 @@ describe('animated component', () => { mockRaf.step() expect(wrapper.scrollTop).toBe(20) }) + it('accepts the className property', () => { + const className = spring('test') + const { getByTestId } = render( + + ) + expect(getByTestId('wrapper').className).toBe('test') + className.set('new') + mockRaf.step() + expect(getByTestId('wrapper').className).toBe('new') + }) it('accepts x/y/z as style keys equivalent to `translate3d`transform function', () => { const { queryByTestId, rerender } = render( diff --git a/targets/web/src/applyAnimatedValues.ts b/targets/web/src/applyAnimatedValues.ts index 3ff5781c49..e05b84bf63 100644 --- a/targets/web/src/applyAnimatedValues.ts +++ b/targets/web/src/applyAnimatedValues.ts @@ -30,8 +30,15 @@ export function applyAnimatedValues(instance: Instance, props: Lookup) { instance.nodeName === 'filter' || (instance.parentNode && instance.parentNode.nodeName === 'filter') - const { style, children, scrollTop, scrollLeft, viewBox, ...attributes } = - props! + const { + className, + style, + children, + scrollTop, + scrollLeft, + viewBox, + ...attributes + } = props! const values = Object.values(attributes) const names = Object.keys(attributes).map(name => @@ -66,6 +73,9 @@ export function applyAnimatedValues(instance: Instance, props: Lookup) { instance.setAttribute(name, values[i]) }) + if (className !== void 0) { + instance.className = className + } if (scrollTop !== void 0) { instance.scrollTop = scrollTop }