3 ms·
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
by 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 agoIf 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> } }