xp.js-styled

xp.js The framework for modern React applications.

xp.js-styled is a single package from that framework.

Build enterprise scalable styled components with minimal schema definition.

Features

• Autogenerated CSS-in-JSX: Automatically generate CSS-in-JSX props for your components, making easy to inline style them directly.

• Media Queries: Encourages devs to easily code responsive components by default, with a plain simple and flexible media queries API.

• Deep Schema: Style schemas can hold schemas recursively, allowing to consider specific cases faster when using queries.

• Color Pallete: Built-in with lots of colors with luminance range. Examples: "red.200", "amber.300", "nature.750", "sky.250"

• Variants Support: Included support for style variants on your components.

Installation

Here you can copy/paste to install from usual package managers.

yarn add xp.js-styled

npm install xp.js-styled

Quick Start

The following guide will teach you how to get this working rather fast!

The function createStyled returns a optimized High-Order wrapper around your component. Styled components subscribes to the given style schema reactively, to optimally perform updates from device layout shift, operative system, or dark-light switches, among any other defined media-query.

Let's start creating a simple Styled View.

export const Box = createStyled(View);

Box now can be inline styled. Notice we pass some usual style props like backgroundColor, width, height and padding as plain props now instead.

export default function Component() {
  return (
    <Box backgroundColor="nature.900" width={200} height={150} padding={"md"} alignItems="center" justifyContent="center">
      ...
    </Box>
  );
}

Even better, we can pass shortcut props and they will mapped very similar to Tailwind, but don't use className.

export default function Component() {
  return (
    <Box bgColor="nature.900" w={200} h={150} p={"md"} center>
      ...
    </Box>
  );
}

Notice the shortcut center. This property will replace alignItems and justifyContent for those who want to quickly center elements, allowing developers to move quickly.

Media Queries

If the style you are aiming for, requires to apply theming base on specific conditions, you can use media queries during your style schema definition.

In this brief example, we apply backgroundColor and padding, but conditionally override those values when the device breaks the "medium" breakpoint.

export const ComplexComponent = createStyled(View, {
  bgColor: "blueViolet.800",
  p: "md",
  "@md": {
    bgColor: "blueViolet.700",
    p: "xl",
  },
});

For more precise control, especially when multiple conditions are involved, it's necessary to deep-nest your queries appropriately. The order of the queries matters.

export const Box = createStyled(View, {
  bgColor: "gray.500",
  "@xl": {
    bgColor: "yellow.450",
    "@android": {
      bgColor: "blue.300",
      "@dark": {
        bgColor: "purple.200",
      },
    },
    "@ios": {
      bgColor: "green.300",
      "@dark": {
        bgColor: "yellow.200",
      },
    },
  },
});

For more details regarding the media queries included, the following tables contains the full list:

Media Query	Description
@light	Light color scheme preference
@dark	Dark color scheme preference
@ios	iOS devices (iPhone, iPad)
@android	Android devices
@macos	macOS devices (MacBook, iMac)
@windows	Windows devices (PC, laptop)
@web	Web browsers and platforms
@xxs	Screens < 360px wide
@xs	Screens 360-576px wide
@sm	Screens 576-768px wide
@md	Screens 768-992px wide
@lg	Screens 992-1200px wide
@xl	Screens 1200-1600px wide
@xxl	Screens > 1600px wide