https://github.com/klirix/with-styles

Super-simple styles lib for react
https://github.com/klirix/with-styles

css css-in-js functional react react-native reactjs styled-components stylesheets

Last synced: 19 days ago
JSON representation

Super-simple styles lib for react

• Host: GitHub
• URL: https://github.com/klirix/with-styles
• Owner: klirix
• Created: 2018-09-27T04:03:28.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-09-27T10:39:31.000Z (about 6 years ago)
• Last Synced: 2024-10-15T09:29:33.207Z (about 1 month ago)
• Topics: css, css-in-js, functional, react, react-native, reactjs, styled-components, stylesheets
• Language: JavaScript
• Size: 23.4 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## withStyles

# Installation

```

yarn add comp-with-styles

```

or

```

npm i -S comp-with-styles

```

A super-simple CSS-in-JS functional replacement for styled components. It could be used with the whole style as a function, consuming props, and also, every individual style can consume props. 

Additionaly, it comes with a HOF to create composable components for compose-freaks.

And it's implemented in less lines than this little example.

```js 

const stylize = styleHoc({ color: ({loading}) => loading? "white" : "black" })

const Loadable = compose(

    connect(s=>({loading: s.loading})),

    stylize

)(Text)

const sizes = { 

    1: 26, 

    2: 20, 

    3: 18

}

const Header = withStyles(Text)({

    fontSize: ({level}) => sizes[level],

    fontWeight: "500",

    color: "#1A1A1A",

    // padding: 15,

})

const Wrapper = withStyles(View)((props) => ({

    padding: props.active ? 20 : 10,

    backgroundColor: props.color

})

```