@develevate/react-preview-link
v0.1.7
Published
![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)
Downloads
50
Readme
React URL Preview Component
A React component that displays a preview of a URL and acts as a clickable link to redirect users to the provided website.
Table of Contents
Demo
Check out the live demo to see the component in action.
Installation
Install the component via npm:
npm install @develevate/react-preview-link
OR via yarn
yarn add @develevate/react-preview-link
Usage
Import the component in your React application and use it within your components:
import React from 'react';
import {PreviewLink} from '@develevate/react-preview-link';
function App() {
return (
<div>
<PreviewLink url="https://example.com" />
</div>
);
}
Props
The PreviewLink
component accepts the following props:
- href (string, required): The URL to be previewed and linked.
- showHoverOverlay (boolean, optional): If
true
renders an overlay over the preview link component | @defaulttrue
- showHoverAnimation (boolean, optional): If
true
adds hover animation of popping out over the preview link | @defaulttrue
- height (number, optional): Height of the preview link component | @default
180
- width (number, optional): Width of the preview link component | @default
320
Examples
Here are a few examples demonstrating different use cases:
<div>
<PreviewLink url="https://example.com" />
<PreviewLink url="https://example.com" className="custom-preview" />
</div>
Feel free to explore more customization options using the CSS file used for styling here.
Contributing
Contributions are welcome! Follow these steps to contribute to the project:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make your changes and submit a pull request.
- Please ensure your code adheres to the existing coding standards.
License
This project is licensed under the MIT License - see the LICENSE.md file for details.