# React Read More
Quickstart |
Installation |
Examples |
Parameters
## About
**React Read More** A React.js package for creating short text with a "read more" button to expand the text, built with TypeScript support. This package provides a simple and easy-to-use component for truncating and expanding text with a customizable button.
### Features
- Support Typescript
- Every part of component (container, text, button) is customizable
- It works with Server-side components (SSR)
- Support classes (Tailwind, Bootstrap, etc...)
- Easy-to-use
## Getting Started
### Installation
To install the package:
```bash
npm install @foxeian/react-read-more
```
### Quickstart
example of 'ReadMoreArea' in React Component
```tsx
import React from 'react';
import ReadMoreArea from '@foxeian/react-read-more';
export default function App() {
return (
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
);
}
);
```
## Example of 'ReadMoreArea' customize
```tsx
import React from 'react';
import ReadMoreArea from '@foxeian/react-read-more';
const buttonStyle = {
color: "blue",
fontSize: "1rem",
padding: "1.5rem",
// Add any other CSS styles as needed
};
export default function App() {
return (
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
);
}
);
```
### Parameters
| Name | Description | Type | Default value |
| --------------- | :------------------------- | :------------- | :------------ |
| className | classes styles of main div | string | null |
| style | inline styles of main div | CSS Properties | null |
| expandLabel | Expand Label | number | `Read more` |
| collapseLabel | Collapse Label | string | `Read less` |
| textClassName | classes styles of text | string | null |
| textStyle | inline styles of text | CSS Properties | null |
| buttonClassName | classes styles of button | string | null |
| buttonStyle | inline styles of button | CSS Properties | null |
| lettersLimit | limit of letters | number | 500 |
## License
MIT © [Immanuel Ehsan](https://github.com/foxeian)