1.0.21 • Published 5 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
5 years ago
1.0.20
5 years ago
1.0.19
5 years ago
1.0.18
5 years ago
1.0.17
5 years ago
1.0.16
5 years ago
1.0.15
5 years ago
1.0.14
5 years ago
1.0.13
5 years ago
1.0.12
5 years ago
1.0.11
5 years ago
1.0.10
5 years ago
1.0.9
5 years ago
1.0.8
5 years ago
1.0.7
5 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago