Skip to content

Instantly share code, notes, and snippets.

@richardpeng
Created January 19, 2017 16:08
Show Gist options
  • Save richardpeng/d814eea83b5908a8501c5362fadc6541 to your computer and use it in GitHub Desktop.
Save richardpeng/d814eea83b5908a8501c5362fadc6541 to your computer and use it in GitHub Desktop.
React Stateless Functional Button Component
import React from 'react';
import classNames from 'classnames';
import filterKeys from './filterKeys';
import './button.less';
const Button = (props) => {
let elementProps = filterKeys( props, Button.propTypes );
return <button {...elementProps} className={classNames( {
button: true,
'button--primary': props.type == 'primary' || props.type == 'submit'
} )}>{props.children}</button>;
};
Button.propTypes = {
type: React.PropTypes.string
};
export default Button;
@import "react-widgets-theme";
.button {
background-color: white;
color: @btn-color;
text-transform: uppercase;
border-radius: @border-radius;
border: 1px solid @btn-border;
padding: 9px 51px;
&--primary {
color: #fff;
background-color: @blue;
}
}
import React from 'react';
import Button from './Button';
const Widget = ( props ) => <div>
<Button disabled={props.disabled} onClick={props.reset}>Clear Data</Button>
<Button type="submit" disabled={props.submitting}>Get Results</Button>
</div>;
export default Widget;
'use strict';
var filterKeys = function ( targetObject, filterObject ) {
var result = Object.assign( {}, targetObject );
for ( var key in filterObject ) {
if ( filterObject.hasOwnProperty( key ) ) {
delete result[ key ];
}
}
return result;
};
module.exports = filterKeys;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment