This component displays as a tag with an optional link and/or button to remove the given tag.
This component is displayed as an accessible 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.
Interact with a live demo of the ak-tag component.
npm install ak-tag --save
The ak-tag package exports the Tag React component.
Import the component in your JS resource:
import ReactDOM from 'react-dom'
import Tag from 'ak-tag';
ReactDOM.render(
<Tag text="Jelly bean"/>,
document.getElementById('root')
);
Now you can use the defined tag in your HTML markup:
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
You can also use it within another JS resource:
import React, { PureComponent } from 'react';
import Tag from 'ak-tag';
export default class MyComponent extends PureComponent {
render = () => (
<div>
<Tag href="http://atlassian.com/careers/"
text="Atlassian"
removeButtonText="Come join us !"
/>
</div>
)
}
Kind: global class
Emits: onBeforeRemoveAction, onAfterRemoveAction
Properties
stringstringstringEvents
Create instances of the component programmatically, or using markup.
JS Example
import Tag from 'ak-tag';
// Tag with text
ReactDOM.render(<Tag text="Cupcake" />, container);
// Tag with link
ReactDOM.render(<Tag text="Atlassian" href="https://www.atlassian.com"/>, container);
// Tag with link that is removable
ReactDOM.render(<Tag text="Atlassian"
href="https://www.atlassian.com"
removeButtonText="Remove Me"/>, container);
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
JS Example
ReactDOM.render(<Tag text="Cupcake" />, container);
// Shows a tag with the text 'Cupcake'
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 Tag#isLinked.
Kind: instance property of Tag
HTML Example
<ak-tag text="Cupcake" href="http://www.cupcakeipsum.com/"></ak-tag>
JS Example
import Tag from 'ak-tag';
// Shows a tag with the text 'Cupcake'
// and a link to cupcakeipsum.com
ReactDOM.render(<Tag text="Cupcake" href="http://www.cupcakeipsum.com/"/>, container);
string(Optional) The text for the remove button tooltip. Implicitly defines that there will be a remove button. This attribute implicitly controls Tag#isRemovable.
Kind: instance property of Tag
JS Example
import Tag from 'ak-tag';
ReactDOM.render(<Tag text='Cupcake' href='http://www.cupcakeipsum.com/' removeButtonText = 'OMG, I am so full!'/>, container);
Shows a tag with the text 'Cupcake' with the link and a remove button
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.onBeforeRemoveAction, (e) => {
console.log('Just about to start the remove animation');
// e.preventDefault(); // this would stop the removal process
});
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.onAfterRemoveAction, () => {
console.log('Finished the remove animation');
document.body.removeChild(tag);
});
Let us know what you think of our components and docs, your feedback is really important for us.
Ask a question in our forum.
Check if someone has already asked the same question before.
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 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.
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
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.