react-tvcx/README.md

A library providing functions to help users create a reusable component system for their projects using React, Tailwind CSS, and TypeScript.

# 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:

```bash
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:

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

Next, create the component factory:

```tsx
const { withRoot, withSlot } = createComponentFactory(Checkbox)
```

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

```tsx
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:

```tsx
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!

## Contributing

We welcome contributions! Please submit a pull request or open an issue if you have suggestions or improvements.

## License

This project is licensed under the MIT License.

## Contact

For further inquiries, please reach out to onepercman.

<a href="https://www.buymeacoffee.com/onepercman" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174" style="border-radius:6px"></a>