react-byverdu

Collection of Reusable React Components

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.

<Button />

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()}}
      />
    );
  }
}

<SplashScreen />

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>
      )
    }
  }
}

<SVGIcon />

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>
    );
  }
}