1
0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-07-02 20:30:27 +00:00
foris-js/src/bootstrap/Modal.md
2019-09-30 11:26:06 +02:00

924 B

Bootstrap modal component.

it's required to have an element <div id={"modal-container"}/> somewhere on the page since modals are rendered in portals.

    <div id="modal-container"/>

I have no idea why example doesn't work here but you can investigate HTML code and Foris project.

import {ModalHeader, ModalBody, ModalFooter} from './Modal';

import {useState} from 'react';
const [shown, setShown] = useState(false);

<>
    <Modal setShown={setShown} shown={shown}>
        <ModalHeader setShown={setShown} title='Warning!'/>
        <ModalBody><p>Bla bla bla...</p></ModalBody>
        <ModalFooter>
            <button 
                className='btn btn-secondary' 
                onClick={() => setShown(false)}
            >Skip it</button>
        </ModalFooter>
    </Modal>
    
    <button className='btn btn-secondary' onClick={()=>setShown(true)}>
        Show modal
    </button>
</>