{"repo":"grrowl/react-keyed-flatten-children","free":true,"listed":false,"github":"https://github.com/grrowl/react-keyed-flatten-children","clone":"git clone https://github.com/grrowl/react-keyed-flatten-children.git","description":"Flattens React children and fragments to an array with predictable and stable keys","language":"TypeScript","stars":152,"topics":["react","typescript"],"license":"MIT","category":"ui-components","readme_excerpt":"react-keyed-flatten-children Similar to React's built-in Children.toArray method, this utility takes children and returns them as an array for introspection or filtering. Different from Children.toArray , it will flatten nested arrays and React.Fragment s into a regular, one-dimensional array while ensuring element and fragment keys are preserved, unique, and stable between renders. getting started This library requires a version of react-is matching your React version be installed alongside this library as a peer dependency. So, if you're using React 19: If you're using React 18 or lower: why? From the documentation of Children.toArray: [toArray] returns the children opaque data structure as a flat array with keys assigned to each child. Useful if you want to manipulate collections of children in your render methods, especially if you want to reorder or slice this.props.children before passing it down. Unfortunately it has some thorny edges: - Children.toArray does not traverse into fragments, which limits flexibility of its use. - Existing solutions exist, but they do not preserve the keys of the children and fragments, which throws away valuable performance optimisations provided through React keys. - You're might be doing something a little wild, so you want the concept of \"children\" to as predictable as possible for you, and for the consumers of your library or component, to avoid issues like this down the line. Some have proposed, soon after Fragments were introduced, t","default_branch":null,"files":null,"tree":[],"storefront":"/r/grrowl","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/grrowl/react-keyed-flatten-children/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}