const [open, setOpen] = useState(false);
<Modal
isOpen={isOpen}
onClose={() =>setOpen(false)}
type={"auto"}
>
{() => (
<div>
<h2>Hello world</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque eget ipsum fringilla, ....</p>
</div>
);
}}
</Modal>| Name | Type | Description |
|---|---|---|
| isOpen | boolean | Listen modal open close |
| size | "auto" | "full" | "default" | Modal size |
| onClose | function | function for modal close |
| children | "ReactElement | render react component |
<Radio
value={value}
onChange={e => setValue(e.currentTarget.value)}
name="number"
>
default
</Radio>
| Name | Type | Description |
|---|---|---|
| name | string | The name attribute specifies the name of an input element. |
| onChange | function | Handler for change events on trigger element. |
| value | string | Passed to the input element value attribute |
<Paginate
forcePage={0}
onPageChange={(selected)=>console.log(selected)}
pageCount={42 / 12}
/>
| Name | Type | Description |
|---|---|---|
| forcePage | number | Select current page number |
| onPageChange | function | Handler for change events on trigger element. |
| pageCount | number | total number of element / limit |
Write somthing ....
<EmptyView message="Write somthing ...." />
| Name | Type | Description |
|---|---|---|
| message | string |
<Popover
placement="bottom-start"
renderReference={(ref, toggle) => (
<button
onClick={() => toggle()}
ref={ref}
>
Trigger
</button>
)}
renderPopover={(toggle) => {
return (
<div
style={{
background: "gray",
height: "100px",
width: "200px",
display: "flex",
alignItems: "center"
}}
>
<p
style={{
color: "white",
padding: "12px"
}}
>
Content
</p>
<button onClick={toggle}>close</button>
</div>
);
}}
/>
| Name | Type | Description |
|---|---|---|
| placement | string | "auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end |
| renderReference | react node | The content that will trigger the popover. |
| renderPopover | react node | content of popover |
| portal | boolean | open content outside of root div |
| zIndex | number | by default it is 60 |