https://github.com/floatdrop/react-styled

:warning: Highly experimental tool for applying styles to React components
https://github.com/floatdrop/react-styled

Last synced: 9 months ago
JSON representation

:warning: Highly experimental tool for applying styles to React components

• Host: GitHub
• URL: https://github.com/floatdrop/react-styled
• Owner: floatdrop
• Created: 2015-01-07T06:14:24.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2015-01-12T09:56:37.000Z (over 11 years ago)
• Last Synced: 2025-07-21T21:53:21.229Z (10 months ago)
• Language: JavaScript
• Homepage:
• Size: 229 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

          
# react-styled [![Build Status](https://travis-ci.org/floatdrop/react-styled.svg?branch=master)](https://travis-ci.org/floatdrop/react-styled)

:warning: __Highly experimental__ tool for applying styles to React components.

__TODO:__

 * [ ] Proper CSS matching

 * [x] Pass props to selector matching

 * [x] Pass state to selector matching

 * [ ] Implement className generation in cases when `:before` is used

 * [ ] Implement `` tag generation for custom classes

## Usage

`index.css`:

```css

button {

	border: 1px solid #eee;

}

button span {

	color: blue;

}

button[pressed="yes"] span {

	color: red;

}

```

`index.jsx`:

```js

var React = require('react');

var Styled = require('react-styled');

// Somehow get index.css contents, webpack for example:

var styled = new Styled(require('css-loader!./index.css').toString());

var Button = React.createClass({

	getInitialState: function() {

		return {hovered: 'no'};

	},

	mouseLeave: function () {

		this.setState({hovered: 'no'});

	},

	mouseEnter: function () {

		this.setState({hovered: 'yes'});

	},

	render: styled(function () {

		return (

			<button onMouseEnter={this.mouseEnter} onMouseLeave={this.mouseLeave}>

				<span>

					{this.props.children}

				</span>

			</button>

		);

	})

});

```

## How does it works

Magic.

## API

### Styled(css)

Returns decorator `Function` for wrapping `render` method of React component.

Not so much yet.

## License

MIT © [Vsevolod Strukchinsky](floatdrop@gmail.com)