Children Limiter

The ChildrenLimiter component is used to limit the number of children that are rendered. It is useful for limiting the number of items in a list.

0

1

2

3

4

5

6

7

8

9

---

Usage

import { ChildrenLimiter } from "@newfold/ui-component-library";

<ChildrenLimiter
    limit={5}
    renderButton={({ show, toggle, ariaProps }) => {
        return (
            <Button onClick={toggle} {...ariaProps}>
                {show ? "Show Less" : "Show More"}
            </Button>
        );
    }}
>
    <p>0</p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
</ChildrenLimiter>

---

Props

Attribute	Type	Description	Default
limit*	number |	The maximum number of children to reveal on initial render.	-
children*	node |	-	-
renderButton*	function |	Render the toggle button. Receives `show`, `toggle` and `ariaProps`.	-
initialShow	bool |	Whether to show the children initially.	false
id	string |	-	-