andywer / andywer/ideabox

ReactCSSDOM

Open
#15 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
No language data
Stars
1
Forks
1
PR merge metrics
No merged PRs in 30d

Description

Extend `react-dom` to provide a generic, fully featured, declarative styling API that is as easy to use as inline styles, but comes with the power of CSS classes:

```jsx
import React from 'react'

const MyButton = ({ children, primary }) => {
return (
{children}
)
}
export default MyButton
```

To render your app:

```jsx
import * as ReactCSSDOM from 'react-css-dom' // instead of react-dom
import MyButton from './Button'

ReactCSSDOM.render(
Click me,
document.getElementById('demo')
)
```

Server-side rendering should also be really simple. Something like that:

```jsx
import * as ReactCSSDOM from 'react-css-dom' // instead of react-dom
import MyButton from './Button'

const stylesheet = ReactCSSDOM.createStylesheet()
const rendered = ReactCSSDOM.renderToString(Click me, stylesheet)

const html = `


${stylesheet.toStyleTag()}


${rendered}

`
```

## Benefits

- Great for component libraries, since it requires no dependencies to be added to the library
- Thus helps keeping the bundle small
- Dead-simple to set up, even for SSR
- Generic, universal styling API

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.