Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Tag
This component displays as a tag with an optional link and/or button to remove the given tag.
Although the ak-tag component can be used by itself, it works best in conjunction with the
ak-tag-group component.
Setup and install
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 we can use the defined tag in our HTML markup, e.g.:
index.html
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<!-- ... -->
<ak-tag text="Jelly bean"></ak-tag>
</body>
</html>
or within another JS resource:
index.js
import Tag from 'ak-tag';
const tag = new Tag();
tag.text = 'Jelly bean';
document.body.appendChild(tag);
React
import Tag from 'ak-tag';
import reactify from 'skatejs-react-integration';
const ReactComponent = reactify(Tag, {});
ReactDOM.render(<ReactComponent text="Jelly bean" />, container);
Tag API
-
Properties
tag.text:stringtag.href:stringtag.remove-button-text:string
-
Methods
tag.isLinked()⇒booleantag.isRemovable()⇒booleantag.remove()
-
Events
Constructor
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);
});
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 0 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 14 Sep 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
Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
By Sarah Gooding - Feb 04, 2025
Research
Security News
Go Supply Chain Attack: Malicious Package Exploits Go Module Proxy Caching for Persistence
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
By Kirill Boychenko - Feb 04, 2025