Numerous Pulls Merged

    @component-sheet/core

    0.1.4 • Public • Published

    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.

    Keywords

    none

    Install

    npm i @component-sheet/core

    DownloadsWeekly Downloads

    3

    Version

    0.1.4

    License

    MIT

    Unpacked Size

    24 kB

    Total Files

    9

    Last publish

    Collaborators

    • ariabuckles