> For the complete documentation index, see [llms.txt](https://fivem-react.gitbook.io/fivem-react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fivem-react.gitbook.io/fivem-react/components/visible.md).

# Visible

## Overview

The `VisibleElement` and `VisibleClose` components are part of a UI system that controls the visibility and transition effects of elements in a React application. These components make it easy to manage elements that can be shown, hidden, and transitioned with specific styles and behaviors.

## VisibleElement

The `VisibleElement` component wraps any content you want to show or hide based on the visibility state. It supports visibility management with transitions, custom styles, and context for child components.

### Props

The component is an iplementation for a `div` element, meaning it inherits all the properties of a `div` along with the additional props specified in the table below.

<table><thead><tr><th>Prop</th><th>Type</th><th>Description</th><th data-type="checkbox">Optional</th></tr></thead><tbody><tr><td><strong><code>elementId</code></strong></td><td><code>string</code></td><td>A unique identifier for the element. Used to manage visibility for multiple elements.</td><td>false</td></tr><tr><td><strong><code>initialValue</code></strong></td><td><code>boolean | "DISPLAY_ON_DEVELOPMENT"</code></td><td>Initial visibility state. If set to <code>"DISPLAY_ON_DEVELOPMENT"</code>, it will only be visible in development mode.</td><td>true</td></tr><tr><td><strong><code>closedStyles</code></strong></td><td><code>React.CSSProperties</code></td><td>Inline styles to apply when the element is closed (hidden).</td><td>true</td></tr><tr><td><strong><code>closedClassName</code></strong></td><td><code>string</code></td><td>CSS class name to apply when the element is closed.</td><td>true</td></tr><tr><td><strong><code>closingStyles</code></strong></td><td><code>React.CSSProperties</code></td><td>Inline styles to apply durning the closing transition.</td><td>true</td></tr><tr><td><strong><code>closingClassName</code></strong></td><td><code>string</code></td><td>CSS class name to apply durning the closing transition.</td><td>true</td></tr><tr><td><strong><code>onOpen</code></strong></td><td><code>() ⇒ void</code></td><td>Callback to be called when the element is opened (becomes visible).</td><td>true</td></tr><tr><td><strong><code>onClose</code></strong></td><td><code>() ⇒ void</code></td><td>Callback to be called when the element is closed (becomes invisible).</td><td>true</td></tr></tbody></table>

*

### Example

```tsx
import { VisibleElement, VisibleClose } from "@yankes/fivem-react/components";

export const MyComponent = () => (
    <VisibleElement
        key="my-element"
        onOpen={() => console.log("Opened")}
        onClose={() => console.log("Closed")}
    >
        <h1>This is a visible element!</h1>
        <VisibleClose>Close Element</VisibleButton>
    </VisibleElement>
);

```

### How It Works

* The `VisibleElement` component listens for visibility updates using the [`useVisible` ](/fivem-react/hooks/use-visible.md)hook.
* The visibility state (`visible`) is dynamically managed, and CSS transitions are applied for opening and closing animations.
* The `VisibleContext` provides visibility state and actions (`close`, `isClosing`) to child components, like [`VisibleButton`](#visiblebutton), so they can interact with the element's visibility.
* The element's styles and class names are conditionally applied based on the visibility and closing state to create smooth transitions.

## VisibleClose

The `VisibleClose` component is a button that interacts with the visibility of a [`VisibleElement`](#visibleelement). It allows users to close the associated element when clicked. This component is tightly coupled with the `VisibleContext` provided by the [`VisibleElement`](#visibleelement).

### Props

The component is a `forwardRef` implementation for a `button` element, meaning it inherits all the properties of a `button`

### Example

The [example from `VisibleElement`](#example)&#x20;

{% hint style="warning" %}
**IMPORTANT:** `<VisibleClose />` must be placed inside `<VisibleElement />`
{% endhint %}

### How It Works

* The `VisibleClose` uses the `VisibleContext` to access the visibility state of the associated `VisibleElement`.
* It triggers the `close` function from the context when clicked, which will hide the associated `VisibleElement`.
* The button is disabled during the closing transition (`isClosing`), ensuring no further interactions can happen until the transition completes.

## Conclusion

* The `VisibleElement` component provides a flexible way to manage visibility with transition effects, and it uses context to enable interaction with child components.
* The `VisibleClose` component acts as an interactive control for the `VisibleElement`, allowing the user to close the element.

These components are great for building dynamic UIs where elements need to be shown, hidden, and transitioned based on user actions.