React-callable-components NPM

react-callable-components

Create callable React components.

Install

npm install react-callable-components

Usage

import { useState } from "react"
import { 
  createComponent,
  ComponentProps,
  html,
  svg,
  styled,
} from "react-callable-components"
import { NavOption } from "./NavOption"

export const Nav = createComponent<{
  options: ComponentProps<typeof NavOption>[]
}>(({ options }) => {
  const [text, setText] = useState("")
  return html.div({
    children: [
      html.input({
        value: text,
        onChange: setText,
        data: {
          noContent: text.length ? false : true, // data-no-content="true"
        }
      })
    ]
  })
})

API

`createComponent<P>(tag: FC<P>)`

Creates a React component with specified props.

P: The props type.
tag: The React functional component or the HTML tag.
Returns: A function that takes optional props and returns a React element.

`ComponentProps<T>`

Represents the properties for a React component, with additional handling for HTML and SVG elements, functional components, and class components.

T: The type of the component or element.

`createElement<T>(tag: T, props?: ComponentProps<T> | null, ...children: ReactNode[]): ReactElement<ComponentProps<T>>`

Creates a React element with the provided tag, properties, and children. Handles the merging of class and className properties for HTML elements.

T: The type of the tag, which can be a string, functional component, or class component.
tag: The tag or component to create.
props: The properties to pass to the component.
children: The children of the component.
Returns: A React element.