# react-common-kit

> Wrappers for some common used react components and utilities

Latest version **1.1.4** (published 2018-12-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-common-kit
pnpm add react-common-kit
yarn add react-common-kit
bun add react-common-kit
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.4 |
| Published | 2018-12-29 |
| First published | 2018-04-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 34.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | dexteryy |
| Maintainers | dexteryy |
| Keywords | react, component, modal, dialog, confirm |

## Links

- npm: https://www.npmjs.com/package/react-common-kit
- Repository: https://github.com/dexteryy/react-common-kit
- Issues: https://github.com/dexteryy/react-common-kit/issues
- npm.io page: https://npm.io/package/react-common-kit

## Dependencies (4)

- [lodash-decorators](https://npm.io/package/lodash-decorators.md) ^6.0.0
- [react-display-name](https://npm.io/package/react-display-name.md) ^0.2.4
- [react-onclickoutside](https://npm.io/package/react-onclickoutside.md) ^6.7.1
- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.0.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.4 (latest) — 2018-12-29
- 1.1.3 — 2018-09-01
- 1.1.2 — 2018-08-23
- 1.1.1 — 2018-04-10
- 1.1.0 — 2018-04-10
- 1.0.4 — 2018-04-04
- 1.0.3 — 2018-04-04
- 1.0.2 — 2018-04-04
- 1.0.1 — 2018-04-02
- 1.0.0 — 2018-04-02

## README

# react-common-kit

[< Back to Project WebCube](https://github.com/dexteryy/Project-WebCube/)

[![NPM Version][npm-image]][npm-url]
<!-- [![Build Status][travis-image]][travis-url]
[![Dependencies Status][dep-image]][dep-url] -->

[![Nodei][nodei-image]][npm-url]

[npm-image]: https://img.shields.io/npm/v/react-common-kit.svg
[nodei-image]: https://nodei.co/npm/react-common-kit.png?downloads=true
[npm-url]: https://npmjs.org/package/react-common-kit
<!--
[travis-image]: https://img.shields.io/travis/dexteryy/react-common-kit/master.svg
[travis-url]: https://travis-ci.org/dexteryy/react-common-kit
[dep-image]: https://david-dm.org/dexteryy/react-common-kit.svg
[dep-url]: https://david-dm.org/dexteryy/react-common-kit
-->

Wrappers for some common used react components and utilities

```
npm install --save react-common-kit
```

## Get Started

### `createHoc`

```js
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`

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

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

### `DetectClickOutSide`

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

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

### `DialogButton`

```js
import DialogButton from './DialogButton'

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

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

```

---
_Source: https://npm.io/package/react-common-kit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._