accessible-ui / modal Goto Github PK
View Code? Open in Web Editor NEW๐ ฐ An accessible and versatile modal component for React
Home Page: https://codesandbox.io/s/accessiblemodal-example-v4koo
License: MIT License
๐ ฐ An accessible and versatile modal component for React
Home Page: https://codesandbox.io/s/accessiblemodal-example-v4koo
License: MIT License
How can I create several modals in the one place?
Something like this
import * as React from "react";
import * as Modal from "@accessible/modal";
const Component = () => (
<Modal.Modal>
<Modal.Trigger>
<button>Open first modal</button>
</Modal.Trigger>
<Modal.Trigger>
<button>Open second modal</button>
</Modal.Trigger>
<Modal.Target>
<div className="my-modal">
<Modal.CloseButton>
<button>Close first modal</button>
</Modal.CloseButton>
<div>First modal</div>
</div>
</Modal.Target>
<Modal.Target>
<div className="my-modal">
<Modal.CloseButton>
<button>Close second modal</button>
</Modal.CloseButton>
<div>Second modal</div>
</div>
</Modal.Target>
</Modal.Modal>
);
https://codesandbox.io/s/wild-brook-v97dk?file=/src/App.js
the isOpen
is always false
Just found the project, I'm trying to add an accessible and low size modal for an open source project I'm currently building, How would you compare this project with https://github.com/github/details-dialog-element and https://github.com/reactjs/react-modal?
Really nice Package!
But I noticed something that confuses me - the <Target>
get's always rendered, even when never shown.
Is there a reason for that? Accessibility?
Currently I'm building a Mobile Menu Overlay with a lot a Nav Entries and I wonder if that maybe impact performance when I render the Overlay all the time.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.