@component-sheet/native

ComponentSheet is a better syntax for styling React elements.

Usage no npm install needed!

<script type="module">
  import componentSheetNative from 'https://cdn.skypack.dev/@component-sheet/native';
</script>

README

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:

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.