react-common-kit
Wrappers for some common used react components and utilities
npm install --save react-common-kit
Get Started
createHoc
; { return ;
ErrorBoundary
; { return <ErrorBoundary // optional FallbackComponent=YourFallbackComponent // optional logger= { // ... } // optional enableStrictMode=true> <YourComponents /> </ErrorBoundary> ;}
DetectClickOutSide
; <DetectClickOutSide onClickOutSide=thishideDropdown> <Dropdown /></DetectClickOutSide>
DialogButton
<DialogButton label="Withdraw" component=Button actions= text: 'Cancel' text: 'Confirm' handler: onWithdraw isPrimary: true ></DialogButton>
// DialogButton.jsx;;;; const ActionButton = styledbutton` background: #eee;`; const PrimaryActionButton = styledbutton` background: blue;`; const DangerousActionButton = styledbutton` background: red;`; const ActionsContainer = styleddiv` display: flex; justify-content: flex-end; padding: 20px;`; const Content = styleddiv` 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; { 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> ;}