search

nandorojo / dripsy

🍷 Responsive, unstyled UI primitives for React Native + Web.
https://dripsy.xyz
MIT License
2.01k stars 80 forks source link

Pressable #81

Closed cmaycumber closed 3 years ago

cmaycumber commented 3 years ago

Adds a pressable component based on @nandorojo's pressable.

Solves: #57

nandorojo commented 3 years ago

Does the style as a function prop work here? I figured it wouldn't since we intercept and flatten the style prop.

JackCA commented 3 years ago

Are there more todos on this one?

nandorojo commented 3 years ago

Just tweaked some small things and merged, will be up with the next release.

nandorojo commented 3 years ago

Published in 1.5.18

nandorojo commented 3 years ago

I just realized that with v2 of dripsy, we could now add the style prop back in and use the headless useSx prop.

const sx = useSx()

return (
  <Pressable 
   style={({ hovered }) => sx({ color: hovered ? 'primary' : 'secondary', px: [2, 3] }))} 
  />
)

Now that there's no fresnel, useSx works responsively. And later versions of v2 ignore the style prop altogether, so it gets passed directly to components. Also, sx returns a memoized style, even if you use it inline (it deep compares with JSON.stringify and creates classNames from there)