Skip to content

Instantly share code, notes, and snippets.

@ryanflorence
Created March 2, 2016 18:36
Show Gist options
  • Save ryanflorence/456141c9e6fdbca6ab4f to your computer and use it in GitHub Desktop.
Save ryanflorence/456141c9e6fdbca6ab4f to your computer and use it in GitHub Desktop.
function createDisabledUntilClientRendersComponent(component, displayName='ClientComponent') {
return React.createClass({
displayName,
propTypes: {
disabled: React.PropTypes.bool
},
getInitialState() {
return { clientRendered: false }
},
componentDidMount() {
this.setState({ clientRendered: true })
},
render() {
const ClientComponent = component
const { clientRendered } = this.state
const { disabled } = this.props
const renderDisabled = clientRendered ? disabled : !clientRendered
return <ClientComponent {...this.props} disabled={renderDisabled}/>
}
})
}
// usage
const ClientButton = createDisabledUntilClientRendersComponent('button', 'ClientButton')
// tests
describe('createDisabledUntilClientRendersComponent', () => {
it('returns a component')
describe('ClientComponent', () => {
describe('when server rendered', () => {
it('is disabled without a disabled prop')
it('is disabled with a `true` disabled prop')
it('is disabled with a `false` disabled prop')
})
describe('when mounted in the client', () => {
it('is enabled without a disabled prop')
it('is disabled with a `true` disabled prop')
it('is enabled with a `false` disabled prop')
})
})
})
@ryanflorence
Copy link
Author

alternative is to render null and save some HTML bytes over the wire.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment