Skip to content

Instantly share code, notes, and snippets.

@victorhqc
Created September 27, 2017 08:43
Show Gist options
  • Save victorhqc/787a38cf6396b3fdaeabd9dd69939f89 to your computer and use it in GitHub Desktop.
Save victorhqc/787a38cf6396b3fdaeabd9dd69939f89 to your computer and use it in GitHub Desktop.
Dynamic render implementation
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Translate from './highOrderComponents/WithTranslate';
import ClickOutside from './highOrderComponents/ClickOutside';
import WithUser from './highOrderComponents/WithUser';
import {
configureUser,
} from './store/actions';
class MyCoolComponent extends Component {
render() {
const {
preferences,
onConfigureUser,
} = this.props;
return (
<ClickOutside>
{(isActive, onClick) => {
if (!isActive) {
return null;
}
return (
<Translate>
{translate => (
<div onClick={onClick}>
{translate('welcome', user.name)}
<button onClick={onConfigureUser}>
{translate('configure', preferences)}
</button>
</div>
)}
</Translate>
);
}}
</ClickOutside>
);
}
}
const mapStateToProps = state => ({
preferences: state.preferences,
});
const mapDispatchToProps = {
configureUser,
};
export default connect(mapStateToProps, mapDispatchToProps)(MyCoolComponent);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment