import React from "react";
import { render } from "react-dom";
import usePortal from 'react-tiny-portal'
const Exmaple1 = () => {
const { Portal, open, close, isOpen } = usePortal();
return (
<div>
<h3>Example Portal</h3>
<p>
<button onClick={open}>Open</button>
</p>
<div id="test"></div>
<Portal bindTo="test" closeOnOutsideClick={true}>
<div style={{ textAlign: "center" }}>
Example Portal
<button onClick={close}>Close</button>
</div>
</Portal>
</div>
);
};
function App() {
return (
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-around",
}}
>
<Exmaple1 />
</div>
);
}
render(<App />, document.getElementById("root"));
chenhx2015 / react-tiny-portal Goto Github PK
View Code? Open in Web Editor NEWreact-tiny-portal
Home Page: https://chenhx2015.github.io/react-tiny-portal/
License: MIT License