Skip to content

Instantly share code, notes, and snippets.

@Rantelo

Rantelo/SocialMediaLogin.js.jsx

Last active June 14, 2017 16:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Rantelo/a690b2d3e0780ffd003b29dd811a5c66 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Rantelo/a690b2d3e0780ffd003b29dd811a5c66 to your computer and use it in GitHub Desktop.
Download ZIP
Presentational Component v2
Raw
SocialMediaLogin.js.jsx
/**
* Social Media Login Button
*/
export const types = {
FACEBOOK: 'facebook',
GOOGLE: 'google',
EMAIL: 'email'
};
export default class SocialMediaLogin extends Component {
render() {
return (
<div className={`${this.props.type}-button`}>
<a className='WhiteText' href={`/auth/${this.props.type}`}>
{this.props.label}
</a>
<img className='social-logo' src={this.props.logo} />
</div>
);
}
}
SocialMediaLogin.defaultProps = {
type: types.EMAIL,
label: 'Login',
logo: require('images/email.svg')
}
Raw
SocialMediaLoginContainer.js.jsx
/**
* Social Media Login Container - holds several buttons
*/
import SocialMediaLogin, { types } from './SocialMediaLogin';
const logo_facebook = require('images/facebook.svg');
const logo_google = require('images/google.svg');
class Container extends Component {
render() {
<div>
<SocialMediaLogin
type={types.FACEBOOK}
label='Login with FB'
logo={logo_facebook}
/>
<SocialMediaLogin
type={types.GOOGLE}
label='Login with G+'
logo={logo_google}
/>
</div>
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment