Do you see this turning into a full fledged component library/design system? Steps for contributing? about dripsy HOT 4 CLOSED

Hey, that is the plan! I'm currently testing this and plan on using it in all of my universal production apps.

I only started working on it last month, so I haven't put together any contribution details yet. I'm happy to do that, though.

As for Next.js / Gastby - there is currently a bit of an issue with server-side rendering of React Native apps and using React Native Web when it comes to responsive design. I can follow-up in a separate comment with details since I'm currently on my phone. I currently have a work-around that makes this library work on Next.js + Expo apps, and I assume the same work-around would work for Gatsby, though I haven't tested it yet.

The current workaround is to wrap your app with the DripsyProvider component, and pass an options prop dictionary where ssr is set to true. options={{ ssr: true }}. Under the hood, this renders a different component that uses styled-components. The reason behind this is elaborated in a few other issues. Basically, it comes down to this: when using server-side rendering, every component's props on the first render on the client side must be the exact same as their props on the server's render. Since we use the screen size to determine which style to apply, and this is done using JS, it's possible that the props on the server and client won't match. This happens because the server doesn't know what the screen size will be on the client.

My current work-around is to use actual CSS media queries, rather than JS-based screen measurements, for server-side rendered apps. This way, the components always have the same props. This is achieved by using styled-components if ssr: true.

However, this solution isn't long-term safe. Why? Because styled components requires editing a component's className prop in order to give it styles (and, more importantly, media queries.) However, the people behind React Native Web just deprecated the className prop, so this solution isn't going to work anymore soon.

Hope the long-winded explanation makes sense, let me know if you need me to clarify.

Important note None of what I just said applies if you're willing to lazy-load components. I figured you'd want to use them for good SEO since they're on Gatsby / Next.js, but if you're willing to lazy load them with code splitting, then you can use this library like normal, without setting ssr: true. 😇

from dripsy.

I'm going to try to put together a separate website for docs, maybe following the layout of the theme ui docs.

from dripsy.

Thanks for the detailed response that will definitely help me as I try to implement the library on gatsby.

I'm going to start playing around with the library and get familiar with it. I'll see if I can get the gatsby implementation running today. I don't mind starting on some components. I'll try to follow the theme-ui components for now and we can merge those in later if you want.

I think a separate website for the docs with the same style as the theme-ui one would be a move. That would be super helpful.

from dripsy.

Sounds good, lmk how it goes.

Right now, most of the standard React Native components can are exported from this library (View, Box, Text, ScrollView), as well as some nice HTML-like elements (H1, H2, ..., P).

You can see which ones exist in src/components.

from dripsy.