Support custom breakpoints about dripsy HOT 2 CLOSED

I think I know a simpler solution to this. Just use a static breakpoints variable that gets mutated in render code of the provider (if it's in your theme.) This way we can access the static variable globally. It's important that this doesn't change on the fly, but I don't see why anyone would change their breakpoints, so that should work.

// breakpoints.ts
export let breakpoints = [...default ones here]
export const editBreakpoints = (newBreakpoints) => (breakpoints = newBreakpoints)

// in DripsyProvider's render
if ('breakpoints' in theme && theme.breakpoints !== breakpoints) {
  editBreakpoints(theme.breakpoints)
}

The provider code should run before any other dripsy components or functions, so that should suffice.

from dripsy.

Okay, I think I thought of a simpler solution. At the root of your app, just do this, before importing any Dripsy code:

// App.js
import { setBreakpoints } from 'dripsy'

setBreakpoints([400, 792, 968, 1200]) // replace with your custom breakpoints

import { DripsyProvider } from 'dripsy'

Please let me know if this works if you come across it! I can't guarantee it will, since I'm not fully sure what order the breakpoints on web get created in with fresnel. It's possible it won't, but we'll see. This is currently an experimental feature.

from dripsy.