Components
Structure
ReadMore

ReadMore

ReadMore

Expand code

Editable Example

import { ReadMore } from "@wfp/react";

() => {
  return (
    <ReadMore
      defaultValue="false"
      fade
      helperText="Optional helper text."
      labelA="Off"
      labelB="On"
      labelText="Toggle label"
      maxHeight={50}
    />
  );
};
PropDefaultDescriptionValue

className

string
–

Specify an optional className to be applied to the wrapper node

collapsed

boolean
–

The content of the collapsed content (optional)

collapseLink

React.ReactNode
–

A custom link for collapsing

collapseText

React.ReactNode
Show less

Custom text for collapsing

default: Show less

disableAutoscroll

boolean
–

Disable the scroll into view on expanding

expandLink

React.ReactNode
–

A custom link for expanding

expandText

React.ReactNode
Show more

Custom text for expanding

default: Show more

fade

boolean
–

Enables the fade effect when the content is collapsed (optional) when enabled collapsed will be ignored

maxHeight

number
–

The maximum height when the content is collapsed (optional)

On this page

References