react-show-more-button v1.0.0

React-show-more-button

React component that limits content (any element/elements) and adds show more button

Table of contents

• Usage
  • Setup
  • Default Configuration
  • Structure
  • React-show-more-button Options / Props
    • maxHeight
    • children
    • button
    • className
    • classNameButton
    • classNameButtonDiv
    • style
    • styleButton
    • styleButtonDiv
    • anchor
    • onChange
  • Anchor explanation

Usage

Setup

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';

 <ShowMore maxHeight={100}>
          <p>
            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)
          </p>
 </ShowMore>

Default Configuration

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.

Structure

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

React-show-more-button Options / Props

Anchor explanation

How the viewport behaves depending on the anchor props:

• defaultAnchor={false} - THIS IS DEFAULT
  

• defaultAnchor={true}

• anchor="#test"