@react-md/portal
Advanced tools
This package is for including icons within react-md. There is included support for both font icons and SVG icons. There is also a helper component for applying spacing between icons and text.
The Portal component is a simple wrapper with React's createPortal API that
will automatically generate portal nodes behind the scenes as needed. Unlike the
majority of react-md packages, this package does not export any styles.
npm install --save @react-md/portal
You should check out the full documentation for live examples and more customization information, but an example usage is shown below.
The main purpose of the Portal is to be able to fix overflow issues for fixed
elements within the page. If you have overflow set to anything other than the
default value, fixed elements might not appear correctly. To work around this,
you can portal that fixed element to a different part of the page and it'll fix
the problem. If none of this makes sense to you at a first glance, you probably
don't need this package.
The example below will just show the API for the portal and not a real world example.
import { useState } from "react";
import { render } from "react-dom";
import { Portal } from "@react-md/portal";
const App = () => {
const [visible, setVisible] = useState(false);
return (
<>
<button
id="example-button"
type="button"
onClick={() => setVisible((prevVisible) => !prevVisible)}
>
Show Portal
</button>
<Portal>
{visible && (
<h3>
This is some portalled text that will only appear when{" "}
<code>visible</code>
</h3>
)}
</Portal>
</>
);
};
render(<App />, document.getElementById("root"));
4.0.1 (2021-11-27)
getPercentage to optionally not throw errors (ff8a1d6)FAQs
This package is for including icons within react-md. There is included support for both font icons and SVG icons. There is also a helper component for applying spacing between icons and text.
We found that @react-md/portal demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.