Releases: nandorojo/dripsy
v2.3.2
v2.2.0
2.2.0 (2021-05-21)
New: Headless Dripsy with useSx
import { useSx } from 'dripsy'If you want to use the sx prop with a custom component, such as from another library, try the useSx hook:
import { Button } from 'react-native-paper'
export default function HeadlessButton() {
const sx = useSx()
return <Button style={sx({ color: 'primary' })} />
}The sx function will return a memoized value.
v2.1.0
v2.0.1
v2 is now out.
yarn add dripsyFixes
There are a lot of nice performance benefits now that we got rid of the Fresnel dependency. It'll be completely gone in a minor update.
Breaking Changes
- This version gets rid of SSR support. If you're using Next.js, pass
ssr={true}to yourDripsyProvider. This comes with a lot of great fixes. - The
webContainerSxprop has been deprecated 😎
Features
v2 doesn't come with any big features yet. Now that we've gotten rid of Fresnel, a ton of doors immediately open to add more features. Consider this major shift a way to let us do much more with Dripsy.
Style based on props
Via #85 and #12, this syntax will now be allowed, and type safe!
It isn't implemented yet, but look out for it.
const TallView = styled(View)(({ height }: { height: number }) => ({
height
}))
export default () => <TallView height={1} />This could also let you memoize components more, if you need to.
Custom component props
Some components, such as ScrollView, have custom style props, such as contentContainerStyle. v2 will make it super easy to support adding themed values to this! It will probably look like this:
const Scrollable = styled(ScrollView, {
customProps: {
contentContainerStyle: true
}
})()
export default () => <TallView height={1} contentContainerStyle={{ bg: 'primary' }} />The API still needs some work here.
Memoized useSx hook
This isn't implemented either, but v2 makes it possible.
import { Button } from 'react-native-paper'
import { useSx } from 'dripsy' // this doesn't exist yet!
export default function PaperButton() {
const paddingTall = 2
const sx = useSx(() => ({ px: [1, null, paddingTall] }), [paddingTall])
return <Button style={sx} />
}This offers another API for interacting with third-party components, besides styled.