react-children-pattern

React utilities for checking allowed components and retrieving specific children

Installation

  # NPM
  pnpm install react-children-pattern

  # NPM
  npm install react-children-pattern

  # YARN
  yarn add react-children-pattern

Hooks

useChildrenOfType

Returns the childs matching the provided function component

import { useChildrenOfType } from "react-children-pattern"

function Child({children}){
  return <span>{children}</span>
}

function OtherChild({children}){
  return <span>{children}</span>
}

function Wrapper({children}){
  const child = useChildrenOfType(Child, children)
  return <div>children</div>
}

<Wrapper>
  <Child>Child 1</Child>
  <OtherChild>Other Child</OtherChild>
  <Child>Child 2</Child>
</Wrapper>

// Result
<div>
  <span>Child 1</span>
  <span>Child 2</span>
</div>

useChildOfType

Returns the first child matching the provided function component

import { useChildOfType } from "react-children-pattern"

function Child({children}){
  return <span>{children}</span>
}

function OtherChild({children}){
  return <span>{children}</span>
}

function Wrapper({children}){
  const child = useChildOfType(Child, children)
  return <div>children</div>
}

<Wrapper>
  <Child>Child 1</Child>
  <OtherChild>Other Child</OtherChild>
  <Child>Child 2</Child>
</Wrapper>

// Result
<div>
  <span>Child 1</span>
</div>

useCheckChildrenTypes

Throws an error if the children don't match the provided function components

import { useCheckChildrenTypes } from "react-children-pattern"

function Child({children}){
  return <span>{children}</span>
}

function OtherChild({children}){
  return <span>{children}</span>
}

function InvalidChild({children}){
  return <span>{children}</span>
}

function Wrapper({children}){
  useCheckChildrenTypes([Child, OtherChild], children)
  return <div>children</div>
}

// Throw this error: Invalid child type InvalidChild. Expected one of Child, OtherChild.
<Wrapper>
  <InvalidChild>Other Child</InvalidChild>
</Wrapper>


// Valid types
<Wrapper>
  <Child>Child 1</Child>
</Wrapper>

// Result
<div>
  <span>Child 1</span>
</div>

License

MIT License

Copyright (c) 2024 Migudevelop