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.

Prop	Type	Description	Optional
elementId	string	A unique identifier for the element. Used to manage visibility for multiple elements.
initialValue	boolean | "DISPLAY_ON_DEVELOPMENT"	Initial visibility state. If set to "DISPLAY_ON_DEVELOPMENT", it will only be visible in development mode.
closedStyles	React.CSSProperties	Inline styles to apply when the element is closed (hidden).
closedClassName	string	CSS class name to apply when the element is closed.
closingStyles	React.CSSProperties	Inline styles to apply durning the closing transition.
closingClassName	string	CSS class name to apply durning the closing transition.
onOpen	() ⇒ void	Callback to be called when the element is opened (becomes visible).
onClose	() ⇒ void	Callback to be called when the element is closed (becomes invisible).

Example

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 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, 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. It allows users to close the associated element when clicked. This component is tightly coupled with the VisibleContext provided by the 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

IMPORTANT: <VisibleClose /> must be placed inside <VisibleElement />

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.