How to create a wrapper component in react.
Tags: webdev, react, javascript, beginners
Published: 2022-03-15 14:21:25

### Quick Synopsis:
 In this article, you will learn about a wrapper component in react, its utility, and how to make a wrapper component.

### What's a wrapper component in react?
Wrapper components are components that surround unknown components and provide a default structure to display the child components.

A wrapper component may be used to create user interface (UI) components that are used frequently throughout a design, such as modals, template pages, and information tiles.

### Code example of a modal react wrapper component.


```javascript
export const Modal = (props) => {
  const { visible, cancel, children } = props;
  const modalRef = useRef(null);

  useEffect(() => {
    const checkIfClickedOutside = (e) => {
      // If the modal is open and the clicked target is not within the modal, 
//then close the modal
      if (visible && modalRef.current && !modalRef.current.contains(e.target)) {
        cancel();
      }
    };

    document.addEventListener("mousedown", checkIfClickedOutside);

    // Cleanup the event listener
    return () => {
      document.removeEventListener("mousedown", checkIfClickedOutside);
    };
  }, [visible]);

  return (
    <>
      {visible && (
        <div className="modal-bg">
          <div ref={modalRef} className="modal-container">
            <button onClick={cancel}>close modal</button>
            {children}
          </div>
        </div>
      )}
    </>
  );
};
```

The preceding code demonstrates a react modal component. 

The modal component is given the following properties to make it reusable anywhere a modal is needed.

- `visible` A Boolean value that controls the visibility of the modals.

- `cancel` A handler function that negates the `visibile` value.

- `children` displays whatever you include between the opening and closing tags when invoking the modal wrapper.


The modal component then transforms into a wrapper component, wrapping the children prop and giving it a modal view.

The modal component can be utilized anywhere a modal is required.

```javascript
function App() {
  const [modalVisble, setModalVisble] = useState(false);

  const handleOpenModal = () => {
    setModalVisble(true);
  };

  const handleCloseModal = () => {
    setModalVisble(false);
  };

  return (
    <div className="App">
      <button type="button" onClick={handleOpenModal}>
        Open modal
      </button>
      <Modal visible={modalVisble} cancel={handleCloseModal}>
        <h1>Hello World</h1>
        <p>I am a modal</p>
      </Modal>
    </div>
  );
}
```

```javascript
.modal-bg {
  background-color: rgba(0, 0, 0, 0.2);
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-container {
  background-color: white;
  padding: 20px;
  width: 70%;
  margin: 0 auto;
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6avx1m7ohb32cey5dkf.gif)

### Conclusion
React wrapper is a must-have approach for every professional react developer.
In this article we learned how we can create a react wrapper component and its use cases.