Security News
PyPI’s New Archival Feature Closes a Major Security Gap
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
By Sarah Gooding - Jan 30, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
ak-tag
This component displays as a tag with an optional link and/or button to remove the given tag.
Tag
This component is displayed as a tag with an optional link and/or button to remove it.
Although the ak-tag component can be used by itself, it works best in conjunction with the
ak-tag-group component.
Try it out
Interact with a live demo of the ak-tag component.
Installation
npm install ak-tag
Using the component
HTML
The ak-tag package exports the Tag Skate component. It automatically registers the respective <ak-tag> web component upon import.
Import the component in your JS resource:
bundle.js
import 'ak-tag';
Now you can use the defined tag in your HTML markup:
index.html
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<!-- ... -->
<ak-tag text="Jelly bean"></ak-tag>
</body>
</html>
You can also use it within another JS resource:
index.js
import Tag from 'ak-tag';
const tag = new Tag();
tag.text = 'Jelly bean';
document.body.appendChild(tag);
React
This is a standard web component, if you want to use it in your React app, use the Skate.js React integration.
import Tag from 'ak-tag';
import reactify from 'skatejs-react-integration';
const ReactComponent = reactify(Tag, {});
ReactDOM.render(<ReactComponent text="Jelly bean" />, container);
Classes
Tag
Kind: global class
Emits: beforeRemove, afterRemove
-
Properties
- tag.text :
string - tag.href :
string - tag.remove-button-text :
string
- tag.text :
-
Methods
- tag.isLinked() ⇒
boolean - tag.isRemovable() ⇒
boolean - tag.remove()
- tag.isLinked() ⇒
-
Events
new Tag()
Create instances of the component programmatically, or using markup.
HTML Example
<ak-tag text="Cupcake" />
JS Example
import Tag from 'ak-tag';
const tag = new Tag();
tag.text = 'Cupcake';
document.body.appendChild(tag);
tag.text : string
(Required) The tag text content. This is a required attribute. Omitting it will stop the tag from being rendered. The text passed will be sanitized, e.g. passed HTML will be represented as plain text.
Kind: instance property of Tag
HTML Example
<ak-tag text="Cupcake"></ak-tag>
JS Example
const tag = new Tag();
tag.text = 'Cupcake';
document.body.appendChild(tag); // Shows a tag with the text 'Cupcake'
JS Example
const tag = new Tag();
tag.text = '<script>alert("no no");</script>';
document.body.appendChild(tag); // Shows a tag with the text
// '<script>alert("no no");</script>'
tag.href : string
(Optional) A target href for the tag text to link to. If this attribute is non-empty, the tag will contain a link to the given URL. The given URL reference will be used as-is and will open in the same window. This attribute implicitly controls isLinked.
Kind: instance property of Tag
HTML Example
<ak-tag text="Cupcake" href="http://www.cupcakeipsum.com/"></ak-tag>
JS Example
const tag = new Tag();
tag.text = 'Cupcake';
tag.href = 'http://www.cupcakeipsum.com/';
document.body.appendChild(tag); // Shows a tag with the text 'Cupcake'
// and a link to cupcakeipsum.com
tag.remove-button-text : string
(Optional) The text for the remove button. Implicitly defines that there will be a remove button. This attribute implicitly controls isRemovable.
Kind: instance property of Tag
HTML Example
<ak-tag text="Cupcake" remove-button-text="OMG, I am so full!"></ak-tag>
JS Example
const tag = new Tag();
tag.text = 'Cupcake';
tag.removeButtonText = 'OMG, I am so full!';
document.body.appendChild(tag); // Shows a tag with the text 'Cupcake' and a remove button
tag.isLinked() ⇒ boolean
Getter to find out whether the tag is linked. This is implicitly controlled by the href attribute.
Kind: instance method of Tag
Returns: boolean - Whether the tag is linked or not
JS Example
tag.isLinked(); // Returns true if the tag is linked.
tag.isRemovable() ⇒ boolean
Getter to find out whether the tag is removable. This is implicitly controlled by the remove-button-text attribute.
Kind: instance method of Tag
Returns: boolean - Whether the tag is removable or not
JS Example
tag.isRemovable(); // Returns true if the tag is removable.
tag.remove()
Allows to programmatically start the tag removal (same as if the user activated the remove button) The removal can be prevented by preventing the Tag#beforeRemove event. The Tag#afterRemove event is fired upon completion. Please note that the tag is not actually removed from the DOM. It is up to the consumer to remove the DOM representation.
Kind: instance method of Tag
Throws:
NotRemovableErrorthrows an error if invoked on a tag that is not removable
Emits: beforeRemove, afterRemove
JS Example
tag.remove(); // triggers the tag removal
JS Example
import Tag, { events } from 'ak-tag';
const { beforeRemove, afterRemove } = events;
const tag = new Tag();
tag.text = 'Cupcake';
tag.removeButtonText = 'Too much food';
tag.addEventListener(beforeRemove, (e) => {
console.log('Just about to start the remove animation');
// e.preventDefault(); // this would stop the removal process
});
tag.addEventListener(afterRemove, () => {
console.log('Remove animation finished');
document.body.removeChild(tag); // actually remove the DOM representation
});
document.body.appendChild(tag);
JS Example
import Tag, { exceptions } from 'ak-tag';
const { NotRemovableError } = exceptions;
const tag = new Tag();
tag.text = 'Cupcake';
document.body.appendChild(tag);
try {
tag.remove();
} catch(e) {
if (e instanceof NotRemovableError) {
console.error('Could not remove tag');
}
}
"beforeRemove"
This event gets emitted before a tag gets removed (e.g. before the remove animation starts). It is cancelable. If it gets cancelled, the removal is aborted.
Kind: event emitted by Tag
HTML Example
<ak-tag
text="Cupcake"
remove-button-text="No more"
onBeforeRemove={(e) => console.log('Just about to start the remove animation')}
></ak-tag>
JS Example
import { events } from 'ak-tag';
tag.addEventListener(events.beforeRemove, (e) => {
console.log('Just about to start the remove animation');
// e.preventDefault(); // this would stop the removal process
});
"afterRemove"
This event gets emitted after a tag has been removed (e.g. after the remove animation finished). It is not cancelable.
Kind: event emitted by Tag
HTML Example
<ak-tag
text="Cupcake"
remove-button-text="No more"
onAfterRemove={(e) => console.log('Finished the remove animation')}
></ak-tag>
JS Example
import { events } from 'ak-tag';
tag.addEventListener(events.afterRemove, () => {
console.log('Finished the remove animation');
document.body.removeChild(tag);
});
NotRemovableError
Kind: global class
Implements: Error
Access: public
new NotRemovableError()
This exception gets thrown if a Tag is removed that is not removable.
Support and feedback
We're here to help!
Let us know what you think of our components and docs, your feedback is really important for us.
Community support
Ask a question in our forum.
Check if someone has already asked the same question before.
Create a support ticket
Are you in trouble? Let us know!
FAQs
This component displays as a tag with an optional link and/or button to remove the given tag.
The npm package ak-tag receives a total of 22 weekly downloads. As such, ak-tag popularity was classified as not popular.
We found that ak-tag 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.
Package last updated on 07 Nov 2016
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.
Related posts
Research
Security News
North Korean APT Lazarus Targets Developers with Malicious npm Package
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.
By Kirill Boychenko, Peter van der Zee - Jan 29, 2025
Security News
CISA Brings KEV Data to GitHub
CISA's KEV data is now on GitHub, offering easier access, API integration, commit history tracking, and automated updates for security teams and researchers.
By Sarah Gooding - Jan 29, 2025