@ryqndev/image-pane v1.2.2

@ryqndev/image-pane

A react component to display images when clicked.

Usage

    <ImagePane
        className={cn.image}
        src='https://boba.watch/bobawatch.png'
        alt='boba watch various screens'
        content={{
            tag: '/ boba watch',
            title: 'splash art',
            description:
                'This is an overview of the splash art that was created for the Boba Watch. The splash art is a combination of the the various screens that can be accessed.',
        }}
    />

Parameters

note The content json object does not have to be a string type. It can be a JSX component like so:

    <ImagePane
        className={cn.image}
        src='https://boba.watch/bobawatch.png'
        alt='boba watch various screens'
        content={{
            tag: <>esta<wbr />blishment</>,
            title: 'splash art',
            description:
                'This is an overview of the splash art that was created for the Boba Watch. The splash art is a combination of the the various screens that can be accessed.',
        }}
    />

Above is a simple example that passes in a JSX component rather than a string for the tag property and creates a wordbreak location in the middle of the text but it can be expanded to have complicated components.

Styling

It is preferred to style the colors with CSS variables. Set these variables accordingly to change the colors of the component. If more custom styling is needed, you can do it through the className parameter mention above.

This is an opinionated component and thats why only basic styling is supported naturally.