Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/krasimir/react-cssx
CSS in React
https://github.com/krasimir/react-cssx
Last synced: 4 months ago
JSON representation
CSS in React
- Host: GitHub
- URL: https://github.com/krasimir/react-cssx
- Owner: krasimir
- License: mit
- Created: 2016-03-08T06:30:44.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-09T15:13:01.000Z (about 8 years ago)
- Last Synced: 2024-10-13T20:15:51.495Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.06 MB
- Stars: 66
- Watchers: 6
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Using vanilla CSS in React application
Yet another way to apply CSS styles in JavaScript. It's not using an inline styling though. It's injecting a `` tag.
```jsx
import React from 'react';
import CSSX from 'react-cssx';
class Component extends React.Component {
render() {
return (
<CSSX styles={ this.css() }>
<h1>Title styled with <i>CSSX</i></h1>
</CSSX>
);
}
css() {
var color = '#BADA55';
return (
<style>
h1 {
color: {{ color }};
}
h1 i {
text-decoration: underline;
}
);
}
}
```
To make the code above works you'll need:
* CSSX component (`npm install react-cssx`)
* CSSX transpiler (It's available [here](https://github.com/krasimir/cssx/tree/master/packages/cssx-transpiler). Get it as a [webpack loader](https://github.com/krasimir/cssx/blob/master/packages/cssx-loader), [Meteor package](https://github.com/Quadric/meteor-cssx) or [gulp plugin](https://github.com/krasimir/cssx/blob/master/packages/gulp-cssx).)
Demo [here](http://krasimir.github.io/react-cssx/example/1/) and [here](http://krasimir.github.io/react-cssx/example/2/).
### CSSX component
`` component has only one required attribute - `styles`. It should be an array in the following format:
```js
[
['h1', { 'font-size': '32px' }],
['h1 small', { 'font-size': '24px', 'font-weight': 'bold' }]
]
```
Of course writing CSS that way is not really nice. So let's use CSSX and replace it with:
```js
css() {
return (
h1 {
font-size: 32px;
}
h1 small {
font-size: 24px;
font-weight: bold;
}
);
}
```
*Notice that we should use a function that returns a `` tag. If we create the `<style>` tag directly (in the render method for example) we'll get the CSS applied straight away to the whole page.*
#### CSSX component's wrapper
The `<CSSX>` component generates a `<div>` by default. Use the `data-element` attribute to specify the tag that you need:
```
<CSSX styles={ ... } data-element='h1'>
<p>Paragraph</p>
</CSSX>
```
### Scoping
If you check [some](http://krasimir.github.io/react-cssx/example/2/) of the [examples](https://github.com/krasimir/react-cssx/tree/master/example) in a browser you'll see that the created styles are scoped to a specific element. For example:
```jsx
class Component extends React.Component {
render() {
return (
<section>
<p>First paragraph</p>
<CSSX styles={ this.styleParagraph('#F00', 'second') }>
<p>Second paragraph</p>
</CSSX>
<CSSX styles={ this.styleParagraph('#00F', 'third') }>
<p>Third paragraph</p>
</CSSX>
</section>
);
}
styleParagraph(color, text) {
return (
<style>
p {
color: {{ color }};
}
p::before {
content: {{ text }};
}
);
}
}
```
There are three paragraphs rendered on the screen:
The first one does not have any local styles attached. However, the second and the third one are styled differently. They have their own dedicated CSS. [CSSX library](https://github.com/krasimir/cssx/tree/master/packages/cssx) creates two `` tags in the `<head>` of the document.
### Misc
If this sounds interesting to you follow the links below:
* [CSSX](https://github.com/krasimir/cssx/)
* [CSSX *language*](https://github.com/krasimir/cssx/blob/master/docs/cssx-lang.md)
* [CSSX client-side library](https://github.com/krasimir/cssx/tree/master/packages/cssx)
* [CSSX transpiler](https://github.com/krasimir/cssx/tree/master/packages/cssx-transpiler)