react-common-kit

< Back to Project WebCube

Wrappers for some common used react components and utilities

npm install --save react-common-kit

Get Started

createHoc

import { createHoc } from 'react-common-kit';

export default function withXXX() {
  return createHoc(
    WrappedComponent =>
      class WithXXX extends Component {
        render() {
          const { ...passThroughProps } = this.props;
          return createElement(WrappedComponent, {
            ...passThroughProps,
          });
        }
      },
    // optional
    {
      // optional
      name: 'WithXXX'
      // optional
      enableRef: true,
    },
  );

ErrorBoundary

import { ErrorBoundary } from 'react-common-kit';

function YourApp() {
  return (
    <ErrorBoundary
      // optional
      FallbackComponent={YourFallbackComponent}
      // optional
      logger={(error, info, props) => {
        // ...
      }}
      // optional
      enableStrictMode={true}>
      <YourComponents />
    </ErrorBoundary>
  );
}

DetectClickOutSide

import { DetectClickOutSide } from 'react-common-kit';

<DetectClickOutSide onClickOutSide={this.hideDropdown}>
  <Dropdown />
</DetectClickOutSide>

DialogButton

import DialogButton from './DialogButton'

<DialogButton
  label="Withdraw"
  component={Button}
  actions={[
    {
        text: 'Cancel',
    },
    {
        text: 'Confirm',
        handler: onWithdraw,
        isPrimary: true,
    },
  ]}>
</DialogButton>

// DialogButton.jsx
import React from 'react';
import Modal from 'react-modal';
import styled, { createGlobalStyle } from 'styled-components';
import { DialogButton as CommonDialogButton } from 'react-common-kit';

const ActionButton = styled.button.attrs({ type: 'button' })`
  background: #eee;
`;

const PrimaryActionButton = styled.button.attrs({ type: 'button' })`
  background: blue;
`;

const DangerousActionButton = styled.button.attrs({ type: 'button' })`
  background: red;
`;

const ActionsContainer = styled.div`
  display: flex;
  justify-content: flex-end;
  padding: 20px;
`;

const Content = styled.div`
  padding: 20px;
`;

const GlobalStyle = createGlobalStyle`
.ReactModal__Overlay { /* ... */ }
.ReactModal__Overlay--after-open { /* ... */ }
.ReactModal__Overlay--before-close { /* ... */ }
.ReactModal__Content { /* ... */ }
.ReactModal__Content--after-open { /* ... */ }
.ReactModal__Content--before-close { /* ... */ }
`;

const modalProps = {
  ariaHideApp: false,
  shouldFocusAfterRender: true,
  shouldCloseOnOverlayClick: false,
  shouldCloseOnEsc: true,
  shouldReturnFocusAfterClose: true,
  closeTimeoutMS: 150,
};

export default function DialogButton({
  children,
  label,
  component,
  actions,
  componentProps,
  isOpened,
}) {
  return (
    <CommonDialogButton
      modal={Modal}
      modalVisibleProp="isOpen"
      modalProps={modalProps}
      actionButton={ActionButton}
      primaryActionButton={PrimaryActionButton}
      dangerousActionButton={DangerousActionButton}
      actionsContainer={ActionsContainer}
      label={label}
      component={component}
      actions={actions}
      componentProps={componentProps}
      isOpened={isOpened}>
      <Content>{children}</Content>
      <GlobalStyle />
    </CommonDialogButton>
  );
}