React-tvcx NPM

react-tvcx

react-tvcx is a library that provides functions to help users create a reusable component system for their projects using React, Tailwind CSS, and TypeScript. It simplifies the creation and management of components with support for variant styles and context-based slot management.

Installation

You can install react-tvcx using npm or yarn:

npm install react-tvcx

Usage

To use the react-tvcx library, you will need to create a component factory by defining your components and their variants. Here's a basic example of how to set up a checkbox component with react-tvcx.

Example

First, import the necessary functions from the library:

import { createComponentFactory } from 'react-tvcx'
import { Checkbox } from './Checkbox' // Assume Checkbox is your base component

Next, create the component factory:

const { withRoot, withSlot } = createComponentFactory(Checkbox)

Now, define the components using the withRoot and withSlot functions:

const Root = withRoot(Checkbox.Root, 'base')
const RootProvider = withRoot(Checkbox.RootProvider, 'base')
const Context = withSlot(Checkbox.Context)
const Control = withSlot(Checkbox.Control, 'control')
const Group = withSlot(Checkbox.Group)
const HiddenInput = withSlot(Checkbox.HiddenInput)
const Indicator = withSlot(Checkbox.Indicator, 'indicator')
const Label = withSlot(Checkbox.Label, 'label')

Creating Your Own Components To create your own components using react-tvcx, follow these steps:

Define Your Base Component: Create a base component that will be enhanced with the react-tvcx features.
Use createComponentFactory: Call createComponentFactory with your base component.
Wrap Your Components: Use withRoot for components that will serve as the primary element (like containers) and withSlot for child components (like labels or buttons).
Render Your Components: Use the wrapped components in your application as you would with any React component.

Example Component Structure Here’s how you might structure a simple Checkbox component:

import React from 'react'

export const Component = createComponentTree(CustomRoot, {
  Root,
  RootProvider,
  Context,
  Control,
  Group,
  HiddenInput,
  Indicator,
  Label,
})

Component.displayName = 'Checkbox'

Thanks to ParkUI team

https://park-ui.com/

I would like to express my gratitude to the ParkUI team for their inspiring ideas and code examples. Their work has greatly influenced the development of my library, react-tvcx. Thank you!