winston0410/camouflage

# `jsx()`

An add-on that allows you to style like `styled-component` but with **atomic CSS and superb performance**.

## Example

```javascript
import { create } from 'glory'
import setUpJsx from 'glory/jsx'

const glory = create()
setUpJsx(glory)

const Button = glory.jsx('button', (props) => ({
    backgroundColor: (props.disabled) ? 'grey' : 'blue',
  fontSize: '40px'
}))

// In a function where you exercise composition
function CallToAction() {
    return <Button disabled={true}>Click me</Button>
}
```

You can create a component based on a component as well for easy style composition:

```javascript
const Text = glory.jsx('p', (props) => ({
    fontSize: '12px'
}))

const BlueText = glory.jsx(Text, (props) => ({
  color: 'blue'
}))
```

### Custom Component name

In React devtool, you can view the name of each component. By default all components generated by `jsx()` are named as `glory.<tagName>`.

If you want to make a custom name for your component, you can pass a name argument to `jsx()`.

```javascript
const Text = glory.jsx('p', (props) => ({
    fontSize: '12px'
}), 'MyTextBlock')
```

## Props Reference

All props will be passed to the component generated by `jsx()` **except ClassName**. The following props are pre-defined with special meanings:

### `as`

This props allows you to change the tag of a component:

```javascript
const Text = glory.jsx('p', (props) => ({
    fontSize: '12px'
}))

function RandomComponent(){
  return (
    <>
      <Text>Hello</Text> //This will return <p class=" a">Hello</p>
      <Text as={'span'}>Hello</Text> //This will return <span class=" a">Hello</span>
    </>
  )
}
```

### `css`

This prop allows you to extend the generated className. This prop is served as an escape hatch for styling composition, and **its usage is discouraged**. Use **component composition** instead for extending style of a component.

```javascript
const Text = glory.jsx('p', (props) => ({
    fontSize: '12px'
}))

function RandomComponent(){
  return (
    <Text css={'my-own-class'}>Hello</Text> //This will return <p class=" a my-own-class">Hello</p>
  )
}
```

What should be done instead of adding a className manually:

```javascript
const Text = glory.jsx('p', (props) => ({
    fontSize: '12px'
}))

// Assuming .my-own-class{color: red;}
const RedText = glory.jsx(Text, (props) => ({
  color: 'red'
}))
```