!GitHub issues
!GitHub closed issues
!GitHub pull requests
!GitHub closed pull requests

ui-custom-hooks

React Hook to open your modal on browser

React Hook to outside click for dropdown and tooltip

Installation

#### yarn

yarn add ui-custom-hooks

#### npm

npm i ui-custom-hooks

Modal Usage

``js
import React from "react";
import { ModalTemplate, useModalHandler } from "ui-custom-hooks/blankModal";

const ModalParent = () => {
const { isVisible, toggleModalStatus } = useModalHandler();
return (
<>
isVisible={isVisible}
toggleModalStatus={toggleModalStatus}
>


export default ModalParent;
`

$3

| Argument | Type | Description | Required |
| ------------------- | --------- | ------------------------------ | -------- |
| children | ReactNode | Components to be view in modal | yes |
| isVisible | boolean | modal visible state value | yes |
| handleModalInactive | ()=>void | modal isVisible handler | no |
| handleModalActive | ()=>void | modal isVisible handler | no |
| borderRadius | string | modal border radius value | no |
| bgColor | string | modal background color value | no |

---

outsideClick(Tooltop, Dropdown...) Usage

`js
import React from "react";
import { render } from "react-dom";
import { ref, isComponentVisible } from "ui-custom-hooks/outsideClick";

const OutsideAlerter = (props) => {
const wrapperRef = useRef(null);
if(isComponentVisible) {
alert("outside Click!!!")
}

return

render(, document.getElementById("root"));
`

$3

| Argument | Type | Description | Required |
| --------------------- | ------------------------------- | ------------------------------ | -------- |
| ref | ref` of the standard component | | - |
| isComponentVisible | boolean | Components visible state value | - |
| setIsComponentVisible | ()=>void | Components isVisible handler | - |