SnackUI is a UI kit for react native and react native web that builds on the ideas of JSXStyle and SwiftUI. It's a great way to build cross platform a

snackui / snackui

submited by
Style Pass
2021-06-08 22:30:05

SnackUI is a UI kit for react native and react native web that builds on the ideas of JSXStyle and SwiftUI. It's a great way to build cross platform app UI's on React that scale well - with smaller bundle sizes and faster rendering performance than StyleSheet.create() on the web. SnackUI is light (15Kb gzipped, up to ~26Kb with Popover/Tooltip); it doesn't prescribe much beyond basic views, hooks, and an optimizing compiler.

SnackUI views flatten all style props onto the base props so there's no separate style prop to use, if you want to read reasoning on why, see why JSXStyle does it, SnackUI has all the same upsides listed there.

Why do this? Beyond the joy and many benefits of Stack views with inline styling, react-native-web views like <View /> and <Text /> aren't free. Read the source of Text for example. When you're rendering a large page with many text and view elements, snackui saves React from having to process all of that logic on every render, for every Text and View.

From here, you can set it two ways: for extraction to CSS on web, you'll need the Webpack plugin. If you don't need that (using a different bundler), or for React Native, then you'll want the babel plugin.

Leave a Comment
Related Posts