1.0.21 • Published 6 years ago
@johnrob1880/restyled v1.0.21
restyled
CSS in JS styles for RE:DOM
Installation
Install this package via npm:
npm install @johnrob1880/restyled
Create
import { el, mount } from 'redom'
import { create } from '@johnrob1880/restyled'
let restyled = create(el)
class App {
constructor() {
this.el = el('.app', this.button = restyled.button({
textContent: 'Submit',
// ... same props passed to redom el
})`
:this {
display: inline-block;
background-color: #000000;
color: #fff;
border: none;
padding: 6px 16px;
}
`)
}
onmount() {
// inject styles into the document's head section
restyled.inject();
}
onunmount() {
// remove styles from the document's head section
restyled.unmount();
}
}
mount(document.body, new App())
CSS
import { css, injectRules, unmountRules } from '@johnrob1880/restyled'
let buttonStyles = css`
:this {
display: inline-block;
background-color: #000000;
color: #fff;
border: none;
padding: 6px 16px;
}
`
class App {
constructor() {
this.el = el('.app', this.button = el('button', {
className = buttonStyles
}))
}
onmount() {
// inject styles into the document's head section
injectRules()
}
onunmount() {
// remove styles from the document's head section
unmountRules()
}
}
mount(document.body, new App())
classNames utility
import { el, mount } from 'redom'
import { classNames } from '@johnrob1880/restyled'
let x = 1, y = 2
let app = el('.app', el('button', {
className: classNames('btn', 'primary', { 'disabled': x === y })
}))
mount(document.body, app)
License
MIT.
1.0.21
6 years ago
1.0.20
6 years ago
1.0.19
6 years ago
1.0.18
6 years ago
1.0.17
6 years ago
1.0.16
6 years ago
1.0.15
6 years ago
1.0.14
6 years ago
1.0.13
6 years ago
1.0.12
6 years ago
1.0.11
6 years ago
1.0.10
6 years ago
1.0.9
6 years ago
1.0.8
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago