https://github.com/mo7amed4a/tw-react-if
A simple and lightweight React component for conditional rendering. Supports three modes: CSS display, Tailwind `hidden`, and full removal from the DOM.
https://github.com/mo7amed4a/tw-react-if
bun react typescript
Last synced: about 2 months ago
JSON representation
A simple and lightweight React component for conditional rendering. Supports three modes: CSS display, Tailwind `hidden`, and full removal from the DOM.
- Host: GitHub
- URL: https://github.com/mo7amed4a/tw-react-if
- Owner: mo7amed4a
- Created: 2025-10-21T09:05:42.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-21T10:09:54.000Z (8 months ago)
- Last Synced: 2025-10-21T11:24:11.574Z (8 months ago)
- Topics: bun, react, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/tw-react-if
- Size: 3.91 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# tw-react-if
A simple and lightweight React component for conditional rendering.
Supports three modes: CSS display, Tailwind `hidden`, and full removal from the DOM.
## Installation
```bash
bun add tw-react-if
```
or with npm:
```bash
npm install tw-react-if
```
## Usage
```tsx
import { IF } from "tw-react-if";
function App() {
return (
Visible using CSS display
Hidden using Tailwind
This will not be rendered at all
);
}
```
## Props
| Name | Type | Default | Description |
|-------------|-----------|-------------|--------------|
| `condition` | `boolean` | `required` | The condition to render or hide children. |
| `mode` | `"display"`, `"tailwind"`, `"remove"` | `"display"` | Defines the hiding method. |
| `display` | `string` | `"block"` | The display style when visible. |
## License
MIT © Mohamed Abdelrahman
[](https://github.com/mo7amed4a)