5 ms·

Except as far as I can tell, with Radium you get zero support for pseudo classes and media queries until after the client-side JavaScript has downloaded and bee

Except as far as I can tell, with Radium you get zero support for pseudo classes and media queries until after the client-side JavaScript has downloaded and been initialised. This is acceptable if it's purely a client-side app, but if you're using an kind of server-side rendering it's clearly not good enough. I really don't want a lack of hover or focus effects on initial page load, and I really don't want my entire page layout to change once the JavaScript-powered media queries kick in.

aleem 11y ago
Radium is simple, for that I like it. Complexity comes with a price and there may be alternatives but Radium leverages JS expressions which I like. Quoting from the article again: /* components/submit-button.jsx */ import { Component } from 'react'; import styles from './submit-button.css'; export default class SubmitButton extends Component { render() { let className, text = "Submit" if (this.props.store.submissionInProgress) { className = styles.inProgress text = "Processing..." } else if (this.props.store.errorOccurred) { className = styles.error } else if (!this.props.form.valid) { className = styles.disabled } else { className = styles.normal } return <button className={className}>{text}</button> } } That looks unwieldy -- 4 if/else clauses just to deal with CSS. Contrast that with the example in "Usage" over at the Radium page https://github.com/FormidableLabs/radium https://github.com/FormidableLabs/radium -- much simpler.
- andrewingram 11y ago
  If we were to mirror the approach of the Radium example, we'd actually end up with something more like this: import React from 'React'; import styles from './SubmitButton.css'; class SubmitButton extends Component { defaultProps = { kind: 'default' } render() { const { kind } = this.props; const text = kind === 'in-progress' ? 'Processing...' : 'Submit'; return <button className={styles[kind]}>{text}</button> } }

aleem 11y ago

Radium is simple, for that I like it. Complexity comes with a price and there may be alternatives but Radium leverages JS expressions which I like. Quoting from the article again: /* components/submit-button.jsx */ import { Component } from 'react'; import styles from './submit-button.css'; export default class SubmitButton extends Component { render() { let className, text = "Submit" if (this.props.store.submissionInProgress) { className = styles.inProgress text = "Processing..." } else if (this.props.store.errorOccurred) { className = styles.error } else if (!this.props.form.valid) { className = styles.disabled } else { className = styles.normal } return <button className={className}>{text}</button> } } That looks unwieldy -- 4 if/else clauses just to deal with CSS. Contrast that with the example in "Usage" over at the Radium page https://github.com/FormidableLabs/radium https://github.com/FormidableLabs/radium -- much simpler.

andrewingram 11y ago
If we were to mirror the approach of the Radium example, we'd actually end up with something more like this: import React from 'React'; import styles from './SubmitButton.css'; class SubmitButton extends Component { defaultProps = { kind: 'default' } render() { const { kind } = this.props; const text = kind === 'in-progress' ? 'Processing...' : 'Submit'; return <button className={styles[kind]}>{text}</button> } }