Bypass `useSx` and expose tokens on custom props

[PaulTondeur]

It would be great if the styled function could be used to not only add the sx prop to components, but also set other props that rely on the dripsy theme.

For example: I'm using dripsy together with moti and would like to be able to use tokens in the animate prop.

In order to achieve this, I now use the following (pseudo) code:

const animateSx = useSx();
return (
  <MotiView animate={animateSx({backgroundColor: enabled ? "$background" : "$disabled"})}>
    ...
  </MotiView>
);

Instead I'd like to simply be able to:

const animateSx = useSx();
return (
  <MotiView animate={{backgroundColor: enabled ? "$background" : "$disabled"}}>
    ...
  </MotiView>
);

In terms of the API, something like the following would be great: export const MotiView = styled(moti.MotiView, ["animate"])({});

Is this already possible? If not, I'd like to request this as a feature :-)

Thanks so much!

[nandorojo]

You could make your own wrapper if you want:

import { MotiView as View } from 'moti'
import { Sx, useSx } from 'dripsy'

type Props = Omit<React.ComponentProps<typeof MotiView>, 'animate'> & {
  animate?: Sx
}

export function MotiView(props: Props) {
  const sx = useSx()
  return <View {...props} animate={props.animate && sx(props.animate)} />
}

I generally recommend wrapping all third-party components for design systems anyway.

[nandorojo]

I don't think I plan to implement this on the library end.