Configuration:

• The <LoadMoreComponent> can accept any element between the opening and closing tag.

    
      <LoadMoreComponent>
          <div className="item"><span>item</span></div>
          <div className="item"><span>item</span></div>
          <div className="item"><span>item</span></div>
      </LoadMoreComponent>
      
  

• The inital limit.

  limit={4}

• Number you wish to increment by when clicking loadmore.

  incrementBy={4}

• Text for load more button.

  loadMoreText={"Load More"}

• Text for Show less button.

  showLessText={"Show Less"}

• Takes an object of styles following standard react inline styling.

  buttonStyling={{padding: "1rem 2rem", borderRadius: "4px", border: "0"}}

• Load more button background colour.

  loadMoreButtonBackgroundColour={"blue"}

• Show less button background colour.

  showLessButtonBackgroundColour={"red"}

• Load more button text colour.

  loadMoreButtonTextColour={"white"}

• Show less button text colour.

  showLessButtonTextColour={"white"}

• Takes an object of styles following standard react inline styling.

  itemWrapperStyling={{display: "flex", flexDirection: "row", flexWrap: "wrap", gap: "12px", padding: "1rem"}}

• Text for if wrapper is empty.

  unableToLoadText={"Unable to Load"}