I used this document to create modal. it's working fine in first time that I call open button but when I close modal, open button not working again. Do you have any idea?
import { useDisclosure, Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Center } from '#chakra-ui/react'
import React from 'react'
export default function Register() {
const { isOpen, onOpen, onClose, onToggle } = useDisclosure()
return (
<Center height={500}>
<Button onClick={onOpen}>Open Modal</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>
test
</ModalBody>
<ModalFooter>
<Button colorScheme='blue' mr={3} onClick={onClose}>
Close
</Button>
<Button variant='ghost'>Secondary Action</Button>
</ModalFooter>
</ModalContent>
</Modal>
</Center>
)
}
I deleted StrictMode tag in app.tsx file and now it's work fine.
<React.StrictMode> </React.StrictMode>
it should be like this:
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
<Provider store={store}>
<ChakraProvider theme={theme}>
<BrowserRouter>
<App />
</BrowserRouter>
</ChakraProvider>
</Provider>
)
Related
I am trying to use chakra ui modal in my app. but this modal is not showing , when I directly pass true to to isOpen .its showing .but when i pass isOpen Disclosure it is not working. when I check the react dev tools. the value of isOpen is changed to true on the button click. but the popup is not coming
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
ModalCloseButton,
Button,
useDisclosure,
} from '#chakra-ui/react'
function Home() {
const {isOpen,onOpen,onClose} = useDisclosure()
return (
<>
<Button onClick={onOpen}>Open Modal</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>
{/* <Lorem count={2} /> */}
</ModalBody>
<ModalFooter>
<Button colorScheme='blue' mr={3} onClick={onClose}>
Close
</Button>
<Button variant='ghost'>Secondary Action</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
)
}
export default Home
I'm trying to solve a problem that seems quite straight forward. I want to focus a form element as soon as a modal opens.
Since react-hook-form does not provide a direct handle to the form refs, I'm trying to use a useEffect hook and react-hook-forms howngrown setFocus functions but I keep seeing the error:
s.focus is not a function
Code
--> Link to coding sandbox
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import "./styles.css";
import {
ChakraProvider,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
Button,
ModalCloseButton,
useDisclosure
} from "#chakra-ui/react";
export default function App() {
const { setFocus, register } = useForm();
const { isOpen, onClose, onOpen } = useDisclosure();
useEffect(() => {
if (!isOpen) return;
setFocus("name");
}, [setFocus, isOpen]);
return (
<ChakraProvider>
<div className="App">
<Button onClick={onOpen}>Open</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>
<input {...register("name")} />
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</div>
</ChakraProvider>
);
}
Maybe setFocus can't run because the modal content (and the input inside) is first unmounted.
An easy solution using setFocus is to make the form as an independant component :
const Form = () => {
const { setFocus, register } = useForm();
useEffect(() => {
setFocus("name");
}, [setFocus]);
return <input {...register("name")} />;
};
and then include it inside the modalBody.
Fixed sandbox link
Read the Chakra documentation there is one prop initialFocusRef, you can pass the ref to the element you want to focus on initially
Chakra provides 2 props for this use case:
initialFocusRef: The ref of the component that receives focus when the modal opens.
finalFocusRef: The ref of the component that receives focus when the modal closes.
import { useEffect, useRef } from "react";
import { useForm } from "react-hook-form";
import "./styles.css";
import {
ChakraProvider,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
Button,
ModalCloseButton,
useDisclosure
} from "#chakra-ui/react";
export default function App() {
const { setFocus, register } = useForm();
const { isOpen, onClose, onOpen } = useDisclosure();
const initialRef = useRef();
useEffect(() => {
//setFocus("name");
}, [setFocus, isOpen]);
return (
<ChakraProvider>
<div className="App">
<Button onClick={onOpen}>Open</Button>
<Modal isOpen={isOpen} onClose={onClose} initialFocusRef={initialRef}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>
<input {...register("name")} ref={initialRef} />
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</div>
</ChakraProvider>
);
}
UPDATED BASED ON COMMENT
By default, Chkra focus enabled elements if you just add tabIndex to your elements and give order value appropriately then it will get focused. Previously close button was focused by default, now in the below code you will notice I have given tabIndex=2 to the close button and tabIndex=1 to the input element and it is working as expected.
<ChakraProvider>
<div className="App">
<Button onClick={onOpen}>Open</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton tabIndex="2" />
<ModalBody>
<input tabIndex="1" {...register("name")} />
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</div>
</ChakraProvider>
If you want to use that using ref then you can check "How to share ref usage?", maybe it will help you.
I am trying to put a modal dialog using react-bootstrap and having issues.
I have a "HintComponent" which consists of a bunch of buttons
<div className="col-5 d-grid gap-2 borderGeneral">
<button className="buttonGeneral" >Label here</button>
<button className="buttonGeneral">SUMMARY</button>
</div>
and I want to launch a Modal dialog on clicking a button.
Looking at the react-bootstrap site, I have the following (taken straight from the site)
import React, {useState} from 'react';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import render from 'react-dom';
function Example() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Launch demo modal
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
render(<Example />);
My issue is - how do I call the Modal from the HintComponent? If I try to import the Modal (in this case ) and call it as just I get a warning about module having no exports.
Can anyone give me a hint?
Hi very simple you need to use this component in your HintComponent and pass a prop showModal={true} but before this, you need to receive that prop in your modal component and set it in state using React.useEffect
So your final code will be like below:
ModalComponent
import React, {useState} from 'react';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import render from 'react-dom';
function Example(props) {
const {showModal = false, onClose = ()=>{}} = props;
const [show, setShow] = useState(showModal);
React.useEffect(()=>{
setShow(showModal);
},[showModal]);
const handleClose = () => {
setShow(false);
// just to have custom function for modal close which will be used can be used in HintComponent maybe you want to perform somehting else after modal close.
typeof onClose === 'function' && onClose();
};
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Launch demo modal
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
render(<Example />);
I would recommend do not manage Modal visibility in its component but control it from the parent component in your case HintComponent.
I was following the documentation of chakra UI. Here is the documentation of chakra ui. But it is not working as it is supposed to do whenever I trigger the hook the screen goes blank.
Below is the code sample. The modal is placed at the end of the file.
DialogModal Component which is imported from DialogModal.js file
import React from "react";
import {
Avatar,
Box,
Collapse,
DrawerContent,
DrawerOverlay,
Flex,
Icon,
IconButton,
Input,
InputGroup,
InputLeftElement,
Text,
useColorModeValue,
useDisclosure,
useColorMode,
Button,
Drawer,
} from "#chakra-ui/react";
import {AddIcon} from '#chakra-ui/icons';
import { FaBell, FaClipboardCheck, FaRss } from "react-icons/fa";
import { FaMoon, FaSun } from "react-icons/fa";
import { AiFillGift } from "react-icons/ai";
import { BsGearFill } from "react-icons/bs";
import { FiMenu, FiSearch } from "react-icons/fi";
import { HiCode, HiCollection } from "react-icons/hi";
import { MdHome, MdKeyboardArrowRight } from "react-icons/md";
import { BrowserRouter, Switch, Route,useRouteMatch } from 'react-router-dom';
import DonationBasedForm from '../../components/CreateDonationBased/CreateDonationBased'
import Campaigns from "../Campaigns/Campaigns";
import CreateCampaign from "../../components/CreateCampaign/CreateCampaign";
import DialogModal from "../../components/Modal/DialogModal";
import DonationBasedCampaigns from "../DonationBasedCampaigns/DonationBasedCampaigns";
export default function Swibc() {
const sidebar = useDisclosure();
const integrations = useDisclosure();
// Create campaign drawer hooks
const { isOpen, onOpen, onClose } = useDisclosure();
const btnRef = React.useRef();
let { path, url } = useRouteMatch();
const { toggleColorMode: toggleMode } = useColorMode();
const SwitchIcon = useColorModeValue(FaMoon, FaSun);
const NavItem = (props) => {
const { icon, children, ...rest } = props;
return (
<Flex
align="center"
px="4"
pl="4"
py="3"
cursor="pointer"
color={useColorModeValue("inherit", "gray.400")}
_hover={{
bg: useColorModeValue("gray.100", "gray.900"),
color: useColorModeValue("gray.900", "gray.200"),
}}
role="group"
fontWeight="semibold"
transition=".15s ease"
{...rest}
>
{icon && (
<Icon
mr="2"
boxSize="4"
as={icon}
/>
)}
{children}
</Flex>
);
};
const SidebarContent = (props) => (
<Box
as="nav"
pos="fixed"
top="0"
left="0"
zIndex="sticky"
h="full"
pb="10"
overflowX="hidden"
overflowY="auto"
bg={useColorModeValue("white", "gray.800")}
borderColor={useColorModeValue("inherit", "gray.700")}
borderRightWidth="1px"
w="60"
{...props}
>
<Flex px="4" py="5" align="center">
<Text
fontSize="2xl"
ml="2"
color={useColorModeValue("brand.500", "white")}
fontWeight="semibold"
>
cffp
</Text>
</Flex>
<Flex
direction="column"
as="nav"
fontSize="sm"
color="gray.600"
aria-label="Main Navigation"
>
<NavItem icon={MdHome}>Home</NavItem>
<NavItem icon={FaRss}>Articles</NavItem>
<NavItem icon={HiCollection}>Collections</NavItem>
<NavItem icon={FaClipboardCheck}>Checklists</NavItem>
<NavItem icon={HiCode} onClick={integrations.onToggle}>
Integrations
<Icon
as={MdKeyboardArrowRight}
ml="auto"
transform={integrations.isOpen && "rotate(90deg)"}
/>
</NavItem>
<Collapse in={integrations.isOpen}>
<NavItem pl="12" py="2">
Shopify
</NavItem>
<NavItem pl="12" py="2">
Slack
</NavItem>
<NavItem pl="12" py="2">
Zapier
</NavItem>
</Collapse>
<NavItem icon={AiFillGift}>Changelog</NavItem>
<NavItem icon={BsGearFill}>Settings</NavItem>
</Flex>
</Box>
);
return (
<>
<Box
as="section"
bg={useColorModeValue("gray.50", "gray.700")}
minH="100vh"
>
<SidebarContent display={{ base: "none", md: "unset" }} />
<Drawer
isOpen={sidebar.isOpen}
onClose={sidebar.onClose}
placement="left"
>
<DrawerOverlay />
<DrawerContent>
<SidebarContent w="full" borderRight="none" />
</DrawerContent>
</Drawer>
<Box ml={{ base: 0, md: 60 }} transition=".3s ease">
<Flex
as="header"
align="center"
justify="space-between"
w="full"
px="4"
bg={useColorModeValue("white", "gray.800")}
borderBottomWidth="1px"
borderColor={useColorModeValue("inherit", "gray.700")}
h="14"
>
<IconButton
aria-label="Menu"
display={{ base: "inline-flex", md: "none" }}
onClick={sidebar.onOpen}
icon={<FiMenu />}
size="sm"
/>
<InputGroup w="96" display={{ base: "none", md: "flex" }}>
<InputLeftElement color="gray.500" children={<FiSearch />} />
<Input placeholder="Search for articles..." />
</InputGroup>
<Flex align="center">
<Button
colorScheme="brand"
size="sm"
mr={[1,1,3]}
onClick={onOpen}
ref={btnRef}
>
Create <AddIcon ml={[1,1,2]} />
</Button>
// MODAL
<DialogModal />
<Avatar
mr="4"
size="sm"
name="anubra266"
src="https://avatars.githubusercontent.com/u/30869823?v=4"
cursor="pointer"
/>
<Icon mr={4} ml={4} color="gray.500" as={SwitchIcon} cursor="pointer" onClick={toggleMode}/>
</Flex>
</Flex>
</>
);
}
The DialogModal File :
import React from 'react';
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
ModalCloseButton,
Button,
Lorem,
useDisclosure
} from "#chakra-ui/react"
const DialogModal = () => {
const { isOpen, onOpen, onClose } = useDisclosure()
return (
<div>
<Button onClick={onOpen}>Open Modal</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Lorem count={2} />
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
<Button variant="ghost">Secondary Action</Button>
</ModalFooter>
</ModalContent>
</Modal>
</div>
)
}
export default DialogModal;
In my case, I was not wrapping the whole component with ChakraProvider because of which the Modal was opening in some weird way.
<ChakraProvider>{...your_component}</ChakraProvider>
The issue went away when I removed Lorem Tag from the modal.
const DialogModal = () => {
const { isOpen, onOpen, onClose } = useDisclosure()
return (
<div>
<Button onClick={onOpen}>Open Modal</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>
{/* <Lorem count={2} /> */}
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
<Button variant="ghost">Secondary Action</Button>
</ModalFooter>
</ModalContent>
</Modal>
</div>
)
}
I'm trying to print out a simple buttton clicked text whenever the submit button is click on my reactstrap modal and somehow my code doesn't do anything, not sure what I have wrong.
I have attached a picture for better visualisation , I'm using reactstrap Modal.
import React, { useState } from "react";
import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import Button from "./Button";
// NOTICE
// Modal is brought in with it's own trigger, so import the component where you want the trigger to be.
const ModalComponent = (props) => {
const {
buttonText,
title,
actionButtonText,
cancelButtonText,
children,
className,
} = props;
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
const alertshow = () => {
alert("button clicked");
};
const closeBtn = (
<button className="close" onClick={toggle}>
×
</button>
);
return (
<div>
<a className="btn_link" onClick={toggle}>
{buttonText}
</a>
<form onSubmit={alertshow}>
<Modal isOpen={modal} toggle={toggle} className={className}>
<ModalHeader className=" border-0" toggle={toggle} close={closeBtn}>
{title}
</ModalHeader>
<ModalBody className="text-left border-0">
<p className="modal-label">Please enter your email address</p>
{children}
</ModalBody>
<ModalFooter className="modal-footer border-0">
<Button className="btn_secondary modal-btn" onClick={toggle}>
{cancelButtonText}
</Button>{" "}
<input
className="btn btn_primary modal-btn"
type="submit"
value={actionButtonText}
/>
</ModalFooter>
</Modal>
</form>
</div>
);
};
export default ModalComponent;
Its happening form should be part of modal not modal should be part of form. This is why its not referencing onSubmit. You need to do this:
<Modal isOpen={modal} toggle={toggle} className={className}>
<form onSubmit={alertshow}>
...rest all content
</Form>
</Modal>
Here is full code:
import React, { useState } from "react";
import "./styles.css";
import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from "reactstrap";
// NOTICE
// Modal is brought in with it's own trigger, so import the component where you want the trigger to be.
const ModalComponent = (props) => {
const {
buttonText,
title,
actionButtonText,
cancelButtonText,
children,
className
} = props;
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
const alertshow = () => {
alert("button clicked");
};
const closeBtn = (
<button className="close" onClick={toggle}>
×
</button>
);
return (
<div>
<div onClick={toggle}>{buttonText}</div>
<Modal isOpen={modal} toggle={toggle} className={className}>
<form onSubmit={alertshow}>
<ModalHeader className=" border-0" toggle={toggle} close={closeBtn}>
{title}
</ModalHeader>
<ModalBody className="text-left border-0">
<p className="modal-label">Please enter your email address</p>
{children}
</ModalBody>
<ModalFooter className="modal-footer border-0">
<Button className="btn_secondary modal-btn" onClick={toggle}>
{cancelButtonText}
</Button>{" "}
<input
className="btn btn_primary modal-btn"
type="submit"
value={actionButtonText}
/>
</ModalFooter>
</form>
</Modal>
</div>
);
};
export default function App() {
return (
<div className="App">
<ModalComponent
title="Hello"
cancelButtonText="Cancel"
actionButtonText="Submit"
buttonText="testing"
/>
</div>
);
}
Here is the demo: https://codesandbox.io/s/fervent-bash-51lxe?file=/src/App.js:0-1826
Accepted answer doesn't work when Modal is scrollable.
Here is how to resolve the issue:
<Modal show={ show } onHide={ onClose }
scrollable={ true }
onSubmit={ handleSubmit(onSave) }
dialogAs={ FormWrappedModal }>
<Modal.Header closeButton>
<Modal.Title>some title</Modal.Title>
</Modal.Header>
<Modal.Body>some body</Modal.Body>
<Modal.Footer>some body</Modal.Footer>
</Modal>
We need to introduce custom component FormWrappedModal for that purpose:
const FormWrappedModal = ( props: any)=>{
return (
<form onSubmit={ props.onSubmit }>
<Modal.Dialog { ...props } />
</form>
);
};