component-sheet

ComponentSheet

ComponentSheet is a better syntax for styling React elements.

What ComponentSheet offers:

• Style react elements cleanly, without all the div/View className= or style= noise

• Style elements using JSX

• Organize your styling, and style-related props, in one place

• Separate the static parts of your render() function

• Supports multiple backends. Works seamlessly with:

  • Aphrodite
  • React Native
  • React Native Web
  • Emotion and styled-components support coming soon
    • (Interested in using ComponentSheet with another backend? Ping me on Twitter)

Usage

const S = ComponentSheet.create(() => ({
  Container: (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'stretch',
        padding: 10,
      }}
    />
  ),

  Message: (
    <div style={{ flex: 1 }}>
        Welcome! Please continue...
    </div>
  ),

  ContinueButton: (
    <button
      style={{
        height: 30,
        marginTop: 10,
        backgroundColor: 'green',
        borderRadius: 10,
      }}
    />
  ),
}));


function MyNoticePage(props) {
  return (
    <S.Container>
      <S.Message />
      <S.ContinueButton onPress={props.onContinue} />
    </S.Container>
  );
}

Getting Started

Choose one:

• npm install --save @component-sheet/aphrodite
• npm install --save @component-sheet/native (for React Native or react-native-web)
• (more coming soon)

How It Works

ComponentSheet takes the jsx you write in ComponentSheet.create and transforms any inline style/classname objects into compiled css using the specified backend library (either Aphrodite, react-native-web, or React Native).

Then, when you render a component declared in your component sheet, it merges in the props you supply at render time, resuling in the final react element.

Advanced Usage

Coming soon.