ak-blanket
Advanced tools
npm install ak-blanket
The ak-blanket package exports the Blanket Skate component.
Import the component in your JS resource:
import 'ak-blanket';
Now we can use the defined tag in our HTML markup, e.g.:
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<!-- ... -->
<ak-blanket></ak-blanket>
</body>
The main purpose of the blanket component is to provide the overlay layer for components such as modal dialog or tooltip. It can be achieved like this:
define('modal-dialog-component', () => {
attached(elem) {
window.addEventListener('ak-blanket-blur', doSomethingWhenBlanketClicked(elem));
},
detached(elem) {
window.removeEventListener('ak-blanket-blur', doSomethingWhenBlanketClicked(elem));
},
render(elem) {
return (
<div>
<ak-blanket clickable tinted />
<div>the rest of the awesome component here</div>
</div>
);
})
It emits the 'ak-blanket-blur' event when clicked/touched.
Blanket component doesn't have the z-index style, so make sure you put it into an appropriate DOM position.
For the purpose of simplicity blanket doesn't have any show/hide functionality. Since the main use of it suppose to be inside popup elements it would appear/disapper with the parent element.
import Blanket from 'ak-blanket';
import reactify from 'skatejs-react-integration';
const ReactComponent = reactify(Blanket, {});
ReactDOM.render(<ReactComponent />, container);
Properties
blanket.tinted : Booleanblanket.clickable : BooleanCreate instances of the component programmatically, or using markup.
JS Example
import Blanket from 'ak-blanket';
const component = new Blanket();
blanket.tinted : BooleanIs blanket grey with opacity or transparent. By default it's transparent.
Kind: instance property of Blanket
Default: false
HTML Example
<ak-blanket tinted></ak-blanket>
JS Example
component.tinted = true
blanket.clickable : BooleanIf click on the blanket emits a 'blanket-click' event.
Kind: instance property of Blanket
Default: false
HTML Example
<ak-blanket clickable></ak-blanket>
JS Example
component.clickable = true
FAQs
A React component that covers the underlying UI for a layered component.
The npm package ak-blanket receives a total of 9 weekly downloads. As such, ak-blanket popularity was classified as not popular.
We found that ak-blanket 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
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Research
A malicious npm campaign is targeting Ethereum developers by impersonating Hardhat plugins and the Nomic Foundation, stealing sensitive data like private keys.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.