Právě teď je modal mou novou posedlostí, protože přidává styl bez námahy!
V tomto příkladu je vytvořen modal pro zobrazení seznamu mých oblíbených anime!
Nejprve se vytvoří jednoduchá funkční komponenta, která vrací tlačítko, jak je znázorněno níže:
import React from 'react';
function ModalInFunctionalComponent (){
return(
<>
<button>Click to View My Favourite Animes</button>
</>
)
}
export default ModalInFunctionalComponent
useState
je třeba importovat pro nastavení booleovských hodnot pro modální otevírání a zavírání. Zpočátku modalIsOpen
je nastaven na false
.
Takže onClick
atribut je nastaven na tlačítko pro otevření modální a po stisknutí setModalIsOpenToTrue
funkce je volána pro nastavení modalIsOpen
až true
.
import React, {useState} from 'react';
function ModalInFunctionalComponent (){
const [modalIsOpen, setModalIsOpen] = useState(false);
const setModalIsOpenToTrue =()=>{
setModalIsOpen(true)
}
return(
<>
<button onClick={setModalIsOpenToTrue}>Click to View My Favourite Animes</button>
</>
)
}
export default ModalInFunctionalComponent
Dále, chcete-li použít modální, nainstalujte modal:npm install react-modal
a poté importujte modal do vaší komponenty:import Modal from react-modal
.
Modální komponenta je vrácena ve funkční komponentě, která má isOpen
atribut. Do modální komponenty je také přidáno další tlačítko, které volá setModalIsOpenToFalse
zavřete modal.
Nakonec jsem vytvořil další komponentu, která vrací seznam mých oblíbených anime a je importována a vrácena uvnitř modální komponenty!
import React from 'react'
function AnimeList () {
return (
<>
<ul>
<h1>One Piece</h1>
<h1>Fullmetal Alchemist: Brotherhood</h1>
<h1>Naruto</h1>
<h1>Bleach</h1>
<h1>Haikyu!!</h1>
<h1>Kuroko no Basketball</h1>
<h1>My hero academia</h1>
<h1>One punch man</h1>
</ul>
</>
)
}
export default AnimeList
import React, {useState} from 'react';
import Modal from 'react-modal';
import AnimeList from './Anime';
function ModalInFunctionalComponent (){
const [modalIsOpen,setModalIsOpen] = useState(false);
const setModalIsOpenToTrue =()=>{
setModalIsOpen(true)
}
const setModalIsOpenToFalse =()=>{
setModalIsOpen(false)
}
return(
<>
<button onClick={setModalIsOpenToTrue}>Click to Open Modal</button>
<Modal isOpen={modalIsOpen}>
<button onClick={setModalIsOpenToFalse}>x</button>
<AnimeList/>
</Modal>
</>
)
}
export default ModalInFunctionalComponent;
A je to! Váš modal by měl fungovat!
A teď trochu stylingu:
const customStyles = {
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)',
backgroundColor : '#F0AA89'
}
};
Modální komponenta má style
atribut s hodnotou customStyles
. Můžete také přidat onRequestClose
nastavte atribut modalIsOpen
na false
. Tím se modální zavře, když uživatel klikne kamkoli mimo modální komponentu, nejen na tlačítko 'x'.
<Modal isOpen={modalIsOpen} style={customStyles} onRequestClose={()=> setModalIsOpen(false)}>
<button onClick={setModalIsOpenToFalse}>x</button>
<AnimeList/>
</Modal>
Děkuji, že jste to dotáhli až do konce :)