React component for hiding/showing long content by providing custom height, styling and content as children
npm install react-show-more-buttonReact component that limits content (any element/elements) and adds show more button
- Usage
- Setup
- Default Configuration
- Structure
- React-show-more-button Options / Props
- maxHeight
- children
- button
- className
- classNameButton
- classNameButtonDiv
- style
- styleButton
- styleButtonDiv
- anchor
- onChange
- Anchor explanation
```
npm install --save react-show-more-button
There are two ways that you can use this components:
- The standard way, however this uses inline-style and if you pass classes(className) as prop, it might not work without the !important tag because of specificality:
``
import ShowMore from 'react-show-more-button';
- Requires for the consumer to have css modules enabled(styles, classes work like you should expect):
``
import ShowMore from 'react-show-more-button/dist/module';
Note: I personally use next.js in my projects and next.js doesn't allow me to import modules from within node_modules. So my choice is import number 1. However, with create-react-app both import options will work (i recommend using import number 2)
Imports and Implementation:
`
import ShowMore from 'react-show-more-button';
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
industry. Lorem Ipsum has been the industry's standbook. It has survived not
only five centuries, but also the leap into electronic typesetting,
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum. Why do we use it? It is
a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point of
using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making
it look like readable English. Many desktop publishing packages and
web page editors now use Lorem Ipsum as their default model text,
and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have ev olved over the years,
sometimes by accident, sometimes on purpose (injected humour and the
like)
``
This component uses background: "#fff" (as default color), you must provide backgroundColor props if you want to change the color. Check React-show-more-button Options / Props for more information.
Components that you can style/edit:
- main div (the container)
- button div (the container of the button)
- button (the button itself)
NOTE: If the default styling/components aren't enough, you can always add you own components. Check the section bellow
| Property/Prop | Type | Description | Default |
| ------------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| maxHeight | number | The max height that you want to limit
your component for | 400 |
| children | JSX.Element or JSX.Element[] or string | The content that you want to limit, pass as children | |
| button | JSX.Element | Pass custom \ or \
How the viewport behaves depending on the anchor props:
- defaultAnchor={false} - THIS IS DEFAULT
!Anchor false
- defaultAnchor={true}
!Anchor true
- anchor="#test"
!Anchor value