> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Chalarangelo/30-seconds-of-code/llms.txt
> Use this file to discover all available pages before exploring further.

# React Component Examples

> Complete component implementations with styling and usage examples

This page provides complete, production-ready React components with full styling and usage examples. Each component is ready to copy and use in your projects.

## Interactive Components

### Toggle Component

A visual toggle switch that works as an enhanced checkbox.

<Tabs>
  <Tab title="Component">
    ```jsx theme={null}
    const Toggle = ({ defaultToggled = false }) => {
      const [isToggleOn, setIsToggleOn] = React.useState(defaultToggled);

      return (
        <label className={isToggleOn ? 'toggle on' : 'toggle off'}>
          <input
            type="checkbox"
            checked={isToggleOn}
            onChange={() => setIsToggleOn(!isToggleOn)}
          />
          {isToggleOn ? 'ON' : 'OFF'}
        </label>
      );
    };

    ReactDOM.createRoot(document.getElementById('root')).render(
      <Toggle />
    );
    ```
  </Tab>

  <Tab title="CSS">
    ```css theme={null}
    .toggle input[type="checkbox"] {
      display: none;
    }

    .toggle.on {
      background-color: green;
    }

    .toggle.off {
      background-color: red;
    }
    ```
  </Tab>

  <Tab title="Usage">
    ```jsx theme={null}
    // Basic usage
    <Toggle />

    // With default state
    <Toggle defaultToggled={true} />

    // Custom styling
    <Toggle defaultToggled={false} />
    ```

    The toggle component uses controlled state with `useState` to manage the on/off state. The visual appearance changes based on the `isToggleOn` state.
  </Tab>
</Tabs>

### Star Rating Component

An interactive 5-star rating component with hover preview.

<Tabs>
  <Tab title="Component">
    ```jsx theme={null}
    const Star = ({ marked, starId }) => {
      return (
        <span data-star-id={starId} className="star" role="button">
          {marked ? '\u2605' : '\u2606'}
        </span>
      );
    };

    const StarRating = ({ value }) => {
      const [rating, setRating] = React.useState(parseInt(value) || 0);
      const [selection, setSelection] = React.useState(0);

      const hoverOver = event => {
        let val = 0;
        if (event && event.target && event.target.getAttribute('data-star-id'))
          val = event.target.getAttribute('data-star-id');
        setSelection(val);
      };
      
      return (
        <div
          onMouseOut={() => hoverOver(null)}
          onClick={e => setRating(e.target.getAttribute('data-star-id') || rating)}
          onMouseOver={hoverOver}
        >
          {Array.from({ length: 5 }, (v, i) => (
            <Star
              starId={i + 1}
              key={`star_${i + 1}`}
              marked={selection ? selection >= i + 1 : rating >= i + 1}
            />
          ))}
        </div>
      );
    };

    ReactDOM.createRoot(document.getElementById('root')).render(
      <StarRating value={2} />
    );
    ```
  </Tab>

  <Tab title="CSS">
    ```css theme={null}
    .star {
      color: #ff9933;
      cursor: pointer;
    }
    ```
  </Tab>

  <Tab title="How It Works">
    The component uses two state variables:

    * **rating**: The actual selected rating value
    * **selection**: The hover preview value

    Key implementation details:

    1. **Separation of concerns**: The `Star` component handles individual star rendering, while `StarRating` manages state
    2. **Data attributes**: Uses `data-star-id` to identify which star was clicked or hovered
    3. **Array generation**: `Array.from({ length: 5 })` creates exactly 5 stars
    4. **Conditional rendering**: Shows either the hover preview (`selection`) or actual rating
  </Tab>
</Tabs>

## Data Display Components

### DataList Component

Transform arrays into formatted lists.

```jsx theme={null}
const DataList = ({ isOrdered = false, data }) => {
  const list = data.map((val, i) => <li key={`${i}_${val}`}>{val}</li>);
  return isOrdered ? <ol>{list}</ol> : <ul>{list}</ul>;
};

const names = ['John', 'Paul', 'Mary'];

ReactDOM.createRoot(document.getElementById('root')).render(
  <>
    <DataList data={names} />
    <DataList data={names} isOrdered />
  </>
);
```

<Note>
  Always provide a unique `key` prop when rendering lists. Here we combine index and value for uniqueness.
</Note>

### DataTable Component

Display array data in table format with ID column.

```jsx theme={null}
const DataTable = ({ data }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        {data.map((val, i) => (
          <tr key={`${i}_${val}`}>
            <td>{i}</td>
            <td>{val}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

const people = ['John', 'Jesse'];

ReactDOM.createRoot(document.getElementById('root')).render(
  <DataTable data={people} />
);
```

### MappedTable Component

Create dynamic tables from arrays of objects.

```jsx theme={null}
const MappedTable = ({ data, propertyNames }) => {
  let filteredData = data.map(v =>
    Object.keys(v)
      .filter(k => propertyNames.includes(k))
      .reduce((acc, key) => ((acc[key] = v[key]), acc), {})
  );
  
  return (
    <table>
      <thead>
        <tr>
          {propertyNames.map(val => (
            <th key={`h_${val}`}>{val}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {filteredData.map((val, i) => (
          <tr key={`i_${i}`}>
            {propertyNames.map(p => (
              <td key={`i_${i}_${p}`}>{val[p]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

const people = [
  { name: 'John', surname: 'Smith', age: 42 },
  { name: 'Adam', surname: 'Smith', gender: 'male' }
];
const propertyNames = ['name', 'surname', 'age'];

ReactDOM.createRoot(document.getElementById('root')).render(
  <MappedTable data={people} propertyNames={propertyNames} />
);
```

<Warning>
  This component does not work with nested objects. Nested values will cause errors.
</Warning>

### TreeView Component

Expandable tree view for nested objects with full recursion support.

<Tabs>
  <Tab title="Component">
    ```jsx theme={null}
    const TreeView = ({
      data,
      toggled = true,
      name = null,
      isLast = true,
      isChildElement = false,
      isParentToggled = true
    }) => {
      const [isToggled, setIsToggled] = React.useState(toggled);
      const isDataArray = Array.isArray(data);

      return (
        <div
          className={`tree-element ${isParentToggled && 'collapsed'} ${
            isChildElement && 'is-child'
          }`}
        >
          <span
            className={isToggled ? 'toggler' : 'toggler closed'}
            onClick={() => setIsToggled(!isToggled)}
          />
          {name ? <strong>&nbsp;&nbsp;{name}: </strong> : <span>&nbsp;&nbsp;</span>}
          {isDataArray ? '[' : '{'}
          {!isToggled && '...'}
          {Object.keys(data).map((v, i, a) =>
            typeof data[v] === 'object' ? (
              <TreeView
                key={`${name}-${v}-${i}`}
                data={data[v]}
                isLast={i === a.length - 1}
                name={isDataArray ? null : v}
                isChildElement
                isParentToggled={isParentToggled && isToggled}
              />
            ) : (
              <p
                key={`${name}-${v}-${i}`}
                className={isToggled ? 'tree-element' : 'tree-element collapsed'}
              >
                {isDataArray ? '' : <strong>{v}: </strong>}
                {data[v]}
                {i === a.length - 1 ? '' : ','}
              </p>
            )
          )}
          {isDataArray ? ']' : '}'}
          {!isLast ? ',' : ''}
        </div>
      );
    };

    const data = {
      lorem: {
        ipsum: 'dolor sit',
        amet: {
          consectetur: 'adipiscing',
          elit: [
            'duis',
            'vitae',
            { semper: 'orci' },
            { est: 'sed ornare' },
            'etiam',
            ['laoreet', 'tincidunt'],
            ['vestibulum', 'ante']
          ]
        },
        ipsum: 'primis'
      }
    };

    ReactDOM.createRoot(document.getElementById('root')).render(
      <TreeView data={data} name="data" />
    );
    ```
  </Tab>

  <Tab title="CSS">
    ```css theme={null}
    .tree-element {
      margin: 0 0 0 4px;
      position: relative;
    }

    .tree-element.is-child {
      margin-left: 16px;
    }

    div.tree-element::before {
      content: '';
      position: absolute;
      top: 24px;
      left: 1px;
      height: calc(100% - 48px);
      border-left: 1px solid gray;
    }

    p.tree-element {
      margin-left: 16px;
    }

    .toggler {
      position: absolute;
      top: 10px;
      left: 0px;
      width: 0;
      height: 0;
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      border-left: 5px solid gray;
      cursor: pointer;
    }

    .toggler.closed {
      transform: rotate(90deg);
    }

    .collapsed {
      display: none;
    }
    ```
  </Tab>

  <Tab title="Features">
    The TreeView component demonstrates several advanced patterns:

    * **Recursion**: Renders itself for nested objects
    * **State cascading**: Parent toggle state affects children
    * **Type detection**: Differentiates between arrays and objects
    * **Dynamic rendering**: Shows different syntax for arrays `[]` vs objects `{}`

    Key props:

    * `data`: The object or array to render
    * `toggled`: Initial expanded state
    * `name`: Display name for the node
    * `isParentToggled`: Whether parent is expanded
  </Tab>
</Tabs>

## Feedback Components

### Tooltip Component

Show contextual information on hover.

<Tabs>
  <Tab title="Component">
    ```jsx theme={null}
    const Tooltip = ({ children, text, ...rest }) => {
      const [show, setShow] = React.useState(false);

      return (
        <div className="tooltip-container">
          <div className={show ? 'tooltip-box visible' : 'tooltip-box'}>
            {text}
            <span className="tooltip-arrow" />
          </div>
          <div
            onMouseEnter={() => setShow(true)}
            onMouseLeave={() => setShow(false)}
            {...rest}
          >
            {children}
          </div>
        </div>
      );
    };

    ReactDOM.createRoot(document.getElementById('root')).render(
      <Tooltip text="Simple tooltip">
        <button>Hover me!</button>
      </Tooltip>
    );
    ```
  </Tab>

  <Tab title="CSS">
    ```css theme={null}
    .tooltip-container {
      position: relative;
    }

    .tooltip-box {
      position: absolute;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      padding: 5px;
      border-radius: 5px;
      top: calc(100% + 5px);
      display: none;
    }

    .tooltip-box.visible {
      display: block;
    }

    .tooltip-arrow {
      position: absolute;
      top: -10px;
      left: 50%;
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
    }
    ```
  </Tab>
</Tabs>

### Alert Component

Dismissible alerts with exit animations.

<Tabs>
  <Tab title="Component">
    ```jsx theme={null}
    const Alert = ({ isDefaultShown = false, timeout = 250, type, message }) => {
      const [isShown, setIsShown] = React.useState(isDefaultShown);
      const [isLeaving, setIsLeaving] = React.useState(false);

      let timeoutId = null;

      React.useEffect(() => {
        setIsShown(true);
        return () => {
          clearTimeout(timeoutId);
        };
      }, [isDefaultShown, timeout, timeoutId]);

      const closeAlert = () => {
        setIsLeaving(true);
        timeoutId = setTimeout(() => {
          setIsLeaving(false);
          setIsShown(false);
        }, timeout);
      };

      return (
        isShown && (
          <div
            className={`alert ${type} ${isLeaving ? 'leaving' : ''}`}
            role="alert"
          >
            <button className="close" onClick={closeAlert} />
            {message}
          </div>
        )
      );
    };

    ReactDOM.createRoot(document.getElementById('root')).render(
      <Alert type="info" message="This is info" />
    );
    ```
  </Tab>

  <Tab title="CSS">
    ```css theme={null}
    @keyframes leave {
      0% { opacity: 1 }
      100% { opacity: 0 }
    }

    .alert {
      padding: 0.75rem 0.5rem;
      margin-bottom: 0.5rem;
      text-align: left;
      padding-right: 40px;
      border-radius: 4px;
      font-size: 16px;
      position: relative;
    }

    .alert.warning {
      color: #856404;
      background-color: #fff3cd;
      border-color: #ffeeba;
    }

    .alert.error {
      color: #721c24;
      background-color: #f8d7da;
      border-color: #f5c6cb;
    }

    .alert.leaving {
      animation: leave 0.5s forwards;
    }

    .alert .close {
      position: absolute;
      top: 0;
      right: 0;
      padding: 0 0.75rem;
      color: #333;
      border: 0;
      height: 100%;
      cursor: pointer;
      background: none;
      font-weight: 600;
      font-size: 16px;
    }

    .alert .close::after {
      content: 'x';
    }
    ```
  </Tab>
</Tabs>

### Modal Dialog Component

Full-featured modal with keyboard support and backdrop click handling.

<Tabs>
  <Tab title="Component">
    ```jsx theme={null}
    const Modal = ({ isVisible = false, title, content, footer, onClose }) => {
      const keydownHandler = ({ key }) => {
        switch (key) {
          case 'Escape':
            onClose();
            break;
          default:
        }
      };

      React.useEffect(() => {
        document.addEventListener('keydown', keydownHandler);
        return () => document.removeEventListener('keydown', keydownHandler);
      });

      return !isVisible ? null : (
        <div className="modal" onClick={onClose}>
          <div className="modal-dialog" onClick={e => e.stopPropagation()}>
            <div className="modal-header">
              <h3 className="modal-title">{title}</h3>
              <span className="modal-close" onClick={onClose}>
                &times;
              </span>
            </div>
            <div className="modal-body">
              <div className="modal-content">{content}</div>
            </div>
            {footer && <div className="modal-footer">{footer}</div>}
          </div>
        </div>
      );
    };

    const App = () => {
      const [isModal, setModal] = React.useState(false);
      return (
        <>
          <button onClick={() => setModal(true)}>Click Here</button>
          <Modal
            isVisible={isModal}
            title="Modal Title"
            content={<p>Add your content here</p>}
            footer={<button>Cancel</button>}
            onClose={() => setModal(false)}
          />
        </>
      );
    };
    ```
  </Tab>

  <Tab title="CSS">
    ```css theme={null}
    .modal {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(0, 0, 0, 0.25);
      animation-name: appear;
      animation-duration: 300ms;
    }

    .modal-dialog {
      width: 100%;
      max-width: 550px;
      background: white;
      position: relative;
      margin: 0 20px;
      max-height: calc(100vh - 40px);
      text-align: left;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      animation-name: slide-in;
      animation-duration: 0.5s;
    }

    .modal-header,
    .modal-footer {
      display: flex;
      align-items: center;
      padding: 1rem;
    }

    .modal-header {
      border-bottom: 1px solid #dbdbdb;
      justify-content: space-between;
    }

    .modal-footer {
      border-top: 1px solid #dbdbdb;
      justify-content: flex-end;
    }

    .modal-close {
      cursor: pointer;
      padding: 1rem;
      margin: -1rem -1rem -1rem auto;
    }

    .modal-body {
      overflow: auto;
    }

    .modal-content {
      padding: 1rem;
    }

    @keyframes appear {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes slide-in {
      from { transform: translateY(-150px); }
      to { transform: translateY(0); }
    }
    ```
  </Tab>

  <Tab title="Features">
    The Modal component includes:

    * **ESC key handling**: Press ESC to close
    * **Backdrop click**: Click outside to close
    * **Event propagation**: Uses `stopPropagation()` to prevent dialog clicks from closing
    * **Cleanup**: Removes event listener on unmount
    * **Animations**: Smooth entry animations
    * **Accessibility**: Uses proper ARIA attributes
  </Tab>
</Tabs>

## Best Practices Summary

<CardGroup cols={2}>
  <Card title="State Management" icon="database">
    Keep state minimal and derived values calculated in render.
  </Card>

  <Card title="Event Cleanup" icon="broom">
    Always clean up event listeners in useEffect return functions.
  </Card>

  <Card title="Accessibility" icon="universal-access">
    Include ARIA roles, keyboard support, and semantic HTML.
  </Card>

  <Card title="CSS Organization" icon="palette">
    Keep styles modular and avoid global namespace pollution.
  </Card>
</CardGroup>