Implementation

To display a modal in your application, you need to set up a few things first. You need to create a component to show inside your modal.

auxiliary-component.tsx
    
       
 import { useState } from "react"; 
 import { Button } from "cloth-ui"; 
 
 const AuxiliaryComponent = ({ closeModal = () => {} }) => { 

  return ( 

    <div> 

      <h1>This is a Modal</h1> 

      <Button text="Close Modal" onClick={closeModal} variant="secondary" /> 

    </div> 

  ); 
 };

After you created your desired component, you can wrap it with the "modal" component.

basic-component.tsx
    
       
 import { useState } from "react"; 
 import { Form, Button } from "cloth-ui"; 
 
 export const BasicComponent = () => { 

  const [showModal, setShowModal] = useState(false); 
 

  return ( 

    <> 

      <Button 

        text="Open Modal" 

        onClick={() => setShowModal(true)} 

        variant="secondary" 

      /> 

      <Modal isOpen={showModal} onClose={() => setShowModal(false)}> 

        <AuxiliaryComponent closeModal={() => setShowModal(false)} /> 

      </Modal> 

    </> 

  ); 
 };

The auxiliary component has its own styles.