├── .babelrc
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── es6
├── index.d.ts
└── index.js
├── package.json
├── webpack.config.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["env"],
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | *.log
3 | node_modules
4 | umd
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | webpack.config.js
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2017 James K Nelson
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | react-cx
2 | ========
3 |
4 | [](https://www.npmjs.org/package/react-cx)
5 |
6 | Add styles from CSS Modules with a `cx` prop:
7 |
8 | ```jsx
9 |
13 | ```
14 |
15 | Inspired by [jareware/css-ns](https://github.com/jareware/css-ns). Uses [jedwatson/classnames](https://github.com/JedWatson/classnames) under the hood.
16 |
17 | Install with npm:
18 |
19 | ```sh
20 | # Adds react-cx to node_modules and package.json
21 | npm install react-cx --save
22 | ```
23 |
24 |
25 | Why?
26 | ----
27 |
28 | When styling components with [CSS modules](https://github.com/css-modules/css-modules), you'll often need join multiple class names together before passing them to the React `className` prop.
29 |
30 | ```jsx
31 | // CSS Modules provide an object with your stylesheet's class names
32 | import styles from './Theme.less'
33 |
34 | export function({ active, className, color, length=1 }) {
35 | const className = `
36 | ${styles.Arrow}
37 | ${active ? styles.active : ''}
38 | ${styles[color] || ''}
39 | ${styles['length-+'length] || ''}
40 | ${className}
41 | `
42 |
43 | }
44 | ```
45 |
46 | The [classnames](https://github.com/JedWatson/classnames) package can help, but the resulting code still feels a little verbose after you've typed it for the 50th time.
47 |
48 | ```jsx
49 | import styles from './Theme.less'
50 |
51 | // classnames provides a helper to build `className` strings
52 | import bindClassNames from 'classnames/bind'
53 | const cx = bindClassNames(styles)
54 |
55 | export function Arrow({ active, className='', color, length=1 }) {
56 | return
57 | }
58 | ```
59 |
60 | With react-cx, you can add styles from your CSS modules directly to your elements by using the `cx` prop. It uses the same syntax as the classnames package, and still lets you append a raw `className` prop.
61 |
62 | ```jsx
63 | import styles from './Theme.less'
64 |
65 | // react-cx adds a `cx` prop to React by wrapping `React.createElement`
66 | import getReactWithCX from './react-cx'
67 | const React = getReactWithCX(styles)
68 |
69 | export function Arrow({ active, className, color, length=1 }) {
70 | return (
71 |
75 | )
76 | }
77 | ```
78 |
79 | Of course, the `cx` prop can also accept strings or plain objects:
80 |
81 | ```jsx
82 | export function Switch({ active, className, color='lifecycle', direction='down' }) {
83 | return (
84 |
88 | )
89 | }
90 | ```
91 |
92 | *These components are taken from my [React lifecycle simulators](https://reactarmory.com/guides/lifecycle-simulators).*
93 |
94 |
95 | How does it work?
96 | -----------------
97 |
98 | In React, JSX calls are translated to calls to `React.createElement()`. Thus, by wrapping `React.createElement()` with our own function, we can add support for new props without ever touching React's internals.
99 |
100 | If you understand how `React.createElement()` works, the easiest way to grok this is to just view the source below. If you're not yet familiar with `React.createElement()`, head over to [React Armory](https://reactarmory.com/guides/learn-react-by-itself/react-basics) for a simple explanation with live examples and exercises.
101 |
102 | ```js
103 | import UnprefixedReact from 'react'
104 | import classnames from 'classnames/bind'
105 |
106 | export default function cx(styles, prop='cx') {
107 | const bound = classnames.bind(styles)
108 |
109 | function getProps(props) {
110 | if (!props) return props
111 |
112 | if (props.cx) {
113 | const result = Object.assign({}, props)
114 | delete result.cx
115 | const args = Array.isArray(props.cx) ? props.cx : [props.cx]
116 | result.className = bound(...args)
117 | if (props.className) result.className += ' '+props.className
118 | return result
119 | }
120 | return props
121 | }
122 | function createElement(type, props, ...children) {
123 | return UnprefixedReact.createElement(type, getProps(props), ...children)
124 | }
125 | function cloneElement(element, props, ...children) {
126 | return UnprefixedReact.cloneElement(element, getProps(props), ...children)
127 | }
128 | return Object.assign({}, UnprefixedReact, {
129 | createElement,
130 | cloneElement
131 | })
132 | }
133 | ```
134 |
135 |
136 | More examples
137 | -------------
138 |
139 | These components are all taken from my [React lifecycle simulators](https://reactarmory.com/guides/lifecycle-simulators).
140 |
141 | ```jsx
142 | export function Indicator({ active, className, color, icon, label, noMobile, scheduled, style }) {
143 | return (
144 |
145 | { icon &&
146 |
{icon}
147 | }
148 |
{label}
149 |
165 |
166 |
167 |
168 |
169 |
170 |