@akms/react-lib

🔒 Internal use only — built for our organization's services.

React component type matching and child selection utilities. SSR-safe. Returns ReactElement, not opaque wrappers, so downstream handling stays type-friendly.

📦 Installation

npm install @akms/react-lib

🚀 Usage

By function reference

import { selectChildByType, selectChildrenByType } from "@akms/react-lib";

const Header = ({ children }: any) => <header>{children}</header>;
const Item = ({ children }: any) => <div>{children}</div>;

function Layout({ children }: { children: React.ReactNode }) {
    const header = selectChildByType(children, Header);
    const items = selectChildrenByType(children, Item);
    return <div>{header}{items}</div>;
}

By __TYPE string (SSR-friendly)

const Header = ({ children }: any) => <header>{children}</header>;
Header.__TYPE = "Header";

const header = selectChildByType(children, "Header");

Predicate & deep search

import { selectChildrenByTypeDeep } from "@akms/react-lib";

const activeTab = selectChildByType(children, Tab, (props) => props.active === true);

// entire tree, but stop descending into matched nodes
const topSections = selectChildrenByTypeDeep(children, Section, { skipWhenFound: true });

🔧 Exports

| Name | Purpose | |------|---------| | selectChildByType | First matching child (shallow) — ReactElement \| null | | selectChildrenByType | All matching children (shallow) — ReactElement[] | | selectChildrenByTypeDeep | All matching children across the tree — ReactElement[] | | typeOfComponent | Resolve a single component's type identifier | | typeOfComponents | Resolve an array of components' type identifiers | | processTypes | Normalize a mixed (string \| component)[] matcher list | | SelectChildConfig, ComponentType | Type re-exports |

Type matchers accept: HTML tag string, __TYPE string, function/class component reference, or a mixed array.

typeOfComponent unwraps React.memo / React.forwardRef / React.lazy to the inner type, and recognizes Fragment / Context.Provider / Context.Consumer as "react.fragment" / "react.provider" / "react.consumer".

⚙️ Options

selectChildrenByTypeDeep(children, type, config?)

| Key | Description | Default | |-----|-------------|---------| | skipWhenFound | Skip descending into a matched node | false | | predicate | (props, child) => boolean additional filter | - |

selectChildByType / selectChildrenByType take predicate as the third positional arg.

🌐 SSR

All matchers work in both client and server. Use function references, __TYPE strings, or HTML tag names interchangeably.

📄 License

MIT

🙏 Credits

Inspired by react-nanny — switched to ReactElement return types for better TypeScript DX.