createTap

Create a component that when rendered, initializes the tapped value with the provided callback. This is useful for accessing context provided by child components inside a parent component.

import { createTap } from "@alloy-js/core";

function createTap<T = unknown>(tapper: Tapper<T>, handler?: TapHandler<T>): Tap<T>;

Parameters

tapper	Tapper<T>
handler	optional TapHandler<T>

Returns

Tap<T>

Example

import { type Children, computed, createTap } from "@alloy-js/core";

// context we will tap into
const SomeContext = createContext<string>();

// a component which provides some specific context
function MyDeclaration(props: { children: Children }) {
  return <SomeContext.Provider value="Hello World">
    {props.children}
  </SomeContext.Provider>;
}

// a parent component which wants to know about the context set
// by its children
function MySpecialDeclaration() {
  const SomeContextTap = createTap(() => useContext(SomeContext));

  return <>
    The declaration context is: {SomeContextTap.ref}
    <MyDeclaration>
      <SomeContextTap />
    </MyDeclaration>
  </>
}

@see {@link createDeclarationTap} for tapping {@link DeclarationContext}.
@see {@link createMemberTap} for tapping {@link MemberDeclarationContext}.
@see {@link createScopeTap} for tapping {@link OutputScope}.
@see {@link createSourceFileTap} for tapping {@link SourceFileContext}.