Feature Toggle Demo (React + Vite)

Overview

This project is a simple React application that demonstrates a Feature Toggle component using conditional rendering based on props. It shows how features in an application can be enabled or disabled without using state management.

Objective

• Practice using props in React
• Implement conditional rendering
• Build a reusable FeatureToggle component

Features

• Displays a feature name when enabled
• Displays a message when the feature is disabled
• Includes multiple test cases (normal and edge cases)

Project Structure

src/ App.jsx FeatureToggle.jsx

How It Works

The FeatureToggle component takes two props:

• isEnabled (boolean): Determines if the feature is active
• featureName (string): Name of the feature

Behavior:

• If isEnabled is true → shows the feature name
• If isEnabled is false → shows: Feature [featureName] is disabled

Getting Started

1. Clone the repository

git clone https://github.com/your-username/feature-toggle-demo.git

2. Navigate to the project folder

cd feature-toggle-demo

3. Install dependencies

npm install

4. Run the development server

npm run dev

Test Cases

Normal Cases Feature enabled → displays feature name Feature disabled → displays disabled message Multiple features with different states Edge Cases Empty feature name ("") Null feature name (null) Non-standard input (e.g., numbers as strings)

Video Demo:

https://youtu.be/vjTN6zLhaWg