# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://fivem-react.gitbook.io/fivem-react/components/visible.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.