ak-blanket
Advanced tools
The main purpose of the blanket component is to provide the overlay layer for components such as a modal dialog or a tooltip.
Interact with a live demo of the ak-blanket component.
npm install ak-blanket
The ak-blanket package exports the Blanket Skate component.
Import the component in your JS resource:
import 'ak-blanket';
Now you can use the defined tag in your HTML markup, for example:
<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('activate', doSomethingWhenBlanketClicked(elem));
},
detached(elem) {
window.removeEventListener('activate', doSomethingWhenBlanketClicked(elem));
},
render(elem) {
return (
<div>
<ak-blanket clickable tinted />
<div>the rest of the awesome component here</div>
</div>
);
})
It emits the 'activate' 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/disappear with the parent element.
This is a standard web component, if you want to use it in your React app, use the Skate.js React integration.
import Blanket from 'ak-blanket';
import reactify from 'skatejs-react-integration';
const ReactComponent = reactify(Blanket, {});
ReactDOM.render(<ReactComponent />, container);
Kind: global class
Properties
blanket.tinted : Booleanblanket.clickable : BooleanEvents
new Blanket()Create 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 : BooleanWhether the blanket is clickable.
Kind: instance property of Blanket
Default: false
Emits: activate
HTML Example
<ak-blanket clickable></ak-blanket>
JS Example
component.clickable = true
"activate"This event is emitted when the blanket is clicked. The emission of this event can be controlled by the clickable property.
Kind: event emitted by Blanket
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.