React Conditional Show Component Library

A lightweight React component library featuring a Higher Order Component (HOC) for conditional rendering. Like Vue.js's v-show directive.

Features

• 🎯 ConditionalShow HOC for dynamic component visibility
• ⚛️ TypeScript support with full type definitions
• 🔄 Easy integration with existing React components
• 🛠️ Built-in CloseButton component example
• 📦 Zero dependencies
• 🔨 Vite powered build system
• 🎨 Code formatting with Biome
• 🚀 GitHub Packages ready
• 🪝 Git hooks with Husky

The library's main feature is the ConditionalShow HOC that enables conditional rendering of components using the r-show prop, similar to Vue.js's v-show directive (yes this is a vue js copy).

Installation

pnpm install @santosl2/react-conditional-show

Development

# Start dev server
pnpm dev

# Build library
pnpm build

Usage

The library exports components that can be imported and used in React applications:

import { ConditionalShow } from 'react-component-lib-template'

// Use conditional rendering
const MyComponent = ConditionalShow(BaseComponent)

// Example with CloseButton
const { CloseButton } = ConditionalShow
<CloseButton r-show={showButton} />

Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Please make sure to update tests as appropriate and follow the existing code style.

License

MIT