Linkify

A Linkify component is a UI tool that automatically detects and converts plain text URLs within a content area into clickable hyperlinks. This enhances user experience by allowing easy access to external resources without the need for manual formatting. Linkify typically recognizes various URL formats and ensures that they are presented in a visually distinct manner, making navigation seamless and intuitive.

Demo

Rendered live, with the same build of the library you install.

Read the docs at https://www.nayanui.com or www.nayanui.com/react, and mail hello@nayanui.com with anything missing.

Usage

Linkify.tsx
import { NLinkify } from '@nayan-ui/react';
const Linkify = () => {
return (
<div>
<NLinkify>Read the docs at https://www.nayanui.com or www.nayanui.com/react, and mail hello@nayanui.com with anything missing.</NLinkify>
</div>
);
};
export default Linkify;

Attributes

3 props
NameTypeDefaultDetails
hrefstringOptionalURL for anchor links.
childrenReact.ReactNodeRequiredLink content.
classNamestring' 'You can customise by passing tailwind classes.

Tags

Other components solving nearby problems.