use-link-preview
v1.0.6
Published
react custom hook for link-preview
Downloads
643
Readme
use-link-preview
use-link-preview
is a React custom hook that simply provides link-preview metadata by link-preview-server.
Document
Installation
npm install use-link-preview
How to use
Install the package.
npm install use-link-preview
Import and Use use-link-preview for components that require link-preview metadata.
import useLinkPreview from "use-link-preview";
function LinkPreview({ url }) {
const { metadata, isLoading, isError } = useLinkPreview(url);
// Usage example
return (
<>
{isLoading && <LoadingComponent />}
{isError && <ErrorComponent />}
{metadata && (
<>
<h3>{metadata.title}</h3>
<p>{metadata.description}</p>
<p>{metadata.domain}</p>
<img src={metadata.img} />
<p>{metadata.requestUrl}</p>
</>
)}
</>
);
}
API options
const { metadata, isLoading, isError } = useLinkPreview(url);
parameter
url
: url string to get link-preview metadata
return value
metadata
: Received link-preview metadata (or null)isLoading
: Check if metadata is being parsed. true or falseisError
: error thrown by parsing metadata (or null)
types
metadata
- title: string | null;
- description: string | null;
- img: string | null;
- domain: string;
- requestUrl: string;
isLoading: boolean
isError: Error | null