xp.js(alpha) is a framework for cross-platform React applications.

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

The goal of this package is to build complex styled components with an easy-to-use schema definition.

Key Features

• CSS-in-JSX: Automatically generate CSS-in-JSX props for your components, making easy to inline style without having to use the prop directly.
• Media Queries: Encourages developers to easily design and write responsive components by default, with their extremely simple media queries API.
• Color Shade: Create re-shades of your colors in realtime with a simple lumen range syntax.
• Faster Iteration: Thanks to its nested nature, it's easy to change, allowing for faster rebranding among other styling solutions.

Quick Start

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

Installation

To get ready fast, here you can copy/paste to install from yarn or npm.

yarn add xp.js-state

npm install xp.js-state

CSS-in-JSX

The createStyled function returns a high order wrapper around your component that applies the given style schema. Then the styled component subscribes to changes from your device, to apply any media queries, variants and stylesheets automatically for you.

Let's start creating a plain StyledView.

export const StyledView = createStyled(View);

Then, this StyledView now can be inline styled with ease. Notice we pass backgroundColor, fontSize and fontWeight as plain props.

export default function Page() {
  return (
    <StyledView backgroundColor="nature.900" fontSize={18} fontWeight="bold">
      ...
    </StyledView>
  );
}

Media Queries

Exploring further into, of course you can create your styled components with a base schema, that will be applied as the global style for that component, but with the option to iterate the styles more with the inline styled.

Now, in this case, we conditionally apply a style override when the device is "medium-size".

export const StyledView = createStyled(View, {
  backgroundColor: "blueViolet.800",
  padding: 20,
  "@md": {
    backgroundColor: "blueViolet.700",
    padding: 25,
  },
});

For more details regarding the media queries, this table contains the full list:

Color System

The library comes with a set of built-in colors, with shade values ranging from 100 to 900 in increments of 50. Any color can use this behaviour, even custom colors.

List of Built-in Colors

Themes

Now, in case you need to share styles across multiple styled components, even with their responsiveness, then you can use a theme.

export const Theme = createTheme({
  styles: {
    container: {
      padding: 5,
      margin: 5,
      "@2k": {
        margin: 5,
        padding: 5,
      },
    },
    center: {
      alignItems: "center",
      justifyContent: "center",
    },
  },
});

export const Card = createStyled(View, {
  theme: Theme,
  parentStyles: ["container", "center"],
});

export const Banner = createStyled(View, {
  theme: Theme,
  backgroundColor: "yellow.400",
  parentStyles: ["container"],
});

Sizing and Breakpoints

Define consistent spacing and sizing across your application using the built-in metrics system.

By default, if you don't provide sizing values, recommended values will be used.

The default breakpoints are:

The default sizes are:

Use these constants to maintain a consistent and responsive design system across your application, however you can customize those values in a theme.

Quick Demo

Here is a full example of how to use most of the library.

export const Card = createStyled(View, {
  backgroundColor: "blueViolet.800",
  padding: 20,
  borderRadius: 10,
  shadowColor: "darkBlue.800",
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.8,
  shadowRadius: 2,
  elevation: 5,
  margin: 10,
});

export const StyledText = createStyled(Text);

export const StyledPressable = createStyled(Pressable, {
  backgroundColor: "lightGreen.500",
  padding: 10,
  borderRadius: 5,
  alignItems: "center",
  justifyContent: "center",
  marginTop: 20,
});

export default function Page(props) {
  return (
    <Card>
      <StyledText color="white.900" fontSize={18} fontWeight="bold">
        Card Title
      </StyledText>
      <StyledText color="gray.300" marginTop={10}>
        This card component demonstrates how to use styled components with a color palette for consistent theming.
      </StyledText>
      <StyledPressable>
        <StyledText color="white.900">OK</StyledText>
      </StyledPressable>
    </Card>
  );
}