After I have done some apps using React I realized that there are some simple components that I keep writing ove and over and over so the intention of this repository is to create some white label components where I only need to pass the desired props.
Representation of a html Button. Only the clickHandler
is a required property.
// Possible properties
Button.propTypes = {
text: PropTypes.string,
clickHandler: PropTypes.func.isRequired,
disabled: PropTypes.bool,
cssClass: PropTypes.string
};
// Default values
Button.defaultProps = {
text: 'Click',
disabled: false,
cssClass: ''
};
// Usage
import Button from 'react-byverdu/lib/Button';
export class Container extends React.Component {
onClickHandler() {
console.log( 'Button clicked!' );
}
render() {
return(
<Button
clickHandler={() => {this.onClickHandler()}}
/>
);
}
}
A loading/splash screen to be rendered when not all props are available.
By default this component will hide/show 3 dots meanwhile the component is visible, if you want to disable this option set enableAnimation={false}
// Possible properties
SplashScreen.propTypes = {
text: PropTypes.string,
cssClass: PropTypes.string,
enableAnimation: PropTypes.bool
};
// Default values
SplashScreen.defaultProps = {
text: 'Loading',
cssClass: '',
enableAnimation: true
};
// Usage
import SplashScreen from 'react-byverdu/lib/SplashScreen';
export class App extends React.Component {
constructor( props ) {
super( props );
this.state = {}
}
renderLoading() {
return(
<SplashScreen />
)
}
renderApp() {
return (
<div className="App">
<Header title="Hello World" />
</div>
);
}
render() {
if ( !this.state.data ) {
return(
<Fragment>
{this.renderLoading()}
</Fragment>
)
} else {
return(
<Fragment>
{this.renderApp()}
</Fragment>
)
}
}
}
Representation of a svg tag element. viewBox
and path
are the two required properties.
// Possible properties
SVGIcon.propTypes = {
cssClass: PropTypes.string,
idattr: PropTypes.string,
width: PropTypes.string,
height: PropTypes.string,
viewBox: PropTypes.string.isRequired,
path: PropTypes.string.isRequired
};
// Default values
SVGIcon.defaultProps = {
cssClass: '',
idattr: '',
width: '50',
height: '50'
};
// Usage
/*
Assuming that you have some data structure as follows;
const iconsData = [
{
id: 'github',
viewBox: '0 0 46.8 46.8',
path: 'reallyyyyy long string'
},
{
id: 'twitter',
viewBox: '0 0 46.8 46.8',
path: 'reallyyyyy long string'
}
]
*/
import SVGIcon from 'react-byverdu/lib/SVGIcon';
import { iconsData } from '../data';
export class Footer extends React.Component {
renderIcons() {
return iconsData.map(( icon, key ) => (
<iconsData
key={key}
idattr={icon.id}
viewBox={icon.viewBox}
path={icon.path}
/>
));
}
render() {
return(
<footer>
{this.renderIcons()}
</footer>
);
}
}