@funnelchat-dev/frontend-layout v1.82.0

Frontend Layout - ff

Installation

With npm:

npm install frontend-layout

Components

Loader

import { FunnelchatLoader } from '@funnelchat-dev/frontend-layout';
import '@funnelchat-dev/frontend-layout/dist/style.css';

export function App() {
    return <FunnelchatLoader />;
}

Layout

import { FunnelchatLayout } from '@funnelchat-dev/frontend-layout';
import '@funnelchat-dev/frontend-layout/dist/style.css';

export function App() {
    return (
        <main>
            <FunnelchatLayout userName={'Alejandro Sanchez'} userImg={''}>
                <h1> Content </h1>
            </FunnelchatLayout>
        </main>
    );
}

Modal Manager

import { FunnelchatModalManager } from '@funnelchat-dev/frontend-layout';
import '@funnelchat-dev/frontend-layout/dist/style.css';

// width and height is with px
// Example

export function App() {
    const [open, setOpen] = useState(false);

    return (
        <main>
            <FunnelchatModalManager
                width="400px"
                height="400px"
                isOpen={open}
                onClose={() => setOpen(false)}>
                <h1> Content </h1>
            </FunnelchatModalManager>

            <button onClick={() => setOpen(true)}> Open Modal </button>
        </main>
    );
}

404

import { FunnelchatError404 } from '@funnelchat-dev/frontend-layout';
import '@funnelchat-dev/frontend-layout/dist/style.css';

export function App() {
    return <FunnelchatError404 />;
}

500

import { FunnelchatError500 } from '@funnelchat-dev/frontend-layout';
import '@funnelchat-dev/frontend-layout/dist/style.css';

export function App() {
    return <FunnelchatError500 />;
}