https://github.com/hermanya/classnamed-components

💋Creating React components using your favorite CSS framework just got easier.
https://github.com/hermanya/classnamed-components

Last synced: about 1 year ago
JSON representation

💋Creating React components using your favorite CSS framework just got easier.

• Host: GitHub
• URL: https://github.com/hermanya/classnamed-components
• Owner: Hermanya
• Created: 2018-11-24T03:26:33.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-03-19T20:54:01.000Z (over 7 years ago)
• Last Synced: 2024-10-29T23:56:33.712Z (over 1 year ago)
• Language: JavaScript
• Homepage: https://Hermanya.github.io/classnamed-components
• Size: 1.17 MB
• Stars: 47
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# classnamed-components

> Do you ever wish there was something like styled-components but for @tachyons_css, @tailwindcss and other #functionalCSS frameworks? There is now!

[![Build Status](https://travis-ci.org/Hermanya/classnamed-components.svg?branch=master)](https://travis-ci.org/Hermanya/classnamed-components)

[![codecov](https://codecov.io/gh/Hermanya/classnamed-components/branch/master/graph/badge.svg)](https://codecov.io/gh/Hermanya/classnamed-components)

[![NPM](https://img.shields.io/npm/v/classnamed-components.svg)](https://www.npmjs.com/package/classnamed-components)

![npm](https://img.shields.io/npm/dt/classnamed-components.svg)

![size](https://badgen.net/bundlephobia/minzip/classnamed-components)

[Website with examples](https://hermanya.github.io/classnamed-components/)

## Install

```bash

npm install classnamed-components

```

## Usage

```jsx

import * as React from 'react'

import classNamed from 'classnamed-components'

const MySection = classNamed("section")`px-6 py-4 bg-white`;

// INSTEAD OF

// const MySection = ({className, ...props}) => {

//   return 

// }

// You can use props to have dynamic class names

const MyButton = classNamed('button')`

  btn shadow

  ${props => ({

    big: 'btn-lg',

    small: 'btn-sm',

  }[props.size])}

`

const MyExample = (props) => (

  

    

    

  

)

```

### Typescript

```tsx

type myButtonProps = {

  size?: 'big' | 'small'

}

const MyButton = classnamed('button')`

  btn shadow

  ${(props: myButtonProps) => ({

    big: 'btn-lg',

    small: 'btn-sm',

  }[props.size || ''] || '')}

` as React.SFC

```

## API

> classNamed is the default export

| prop | type                      | default | description                |

| ---- | ------------------------- | ------- | -------------------------- |

| as   | React.Component or string | none    | replacement base component |

## Examples

- [tailwind](https://hermanya.github.io/classnamed-components/#tailwind)

- [tachyons](https://hermanya.github.io/classnamed-components/#tachyons)

- [bootstrap](https://hermanya.github.io/classnamed-components/#bootstrap)

## License

MIT © [Hermanya](https://github.com/Hermanya)