Content

The Content component is a structural element designed to act as a wrapper of the main section of your page. Typically, the Content component is used alongside the Top and Bottom components to achieve better page structure.

Usage

The primary use case for the Content component is as a container for the main content area of the page.

import Layout from '@components/Layout/Layout/Layout';
import Top from '@components/Layout/Top/Top';
import Content from '@components/Layout/Content/Content';
import Bottom from '@components/Layout/Bottom/Bottom';

const App = () => {
    return (
        <Layout>
            <Top>Top Menu</Top>
            <Content style={{ display: 'flex', flexDirection: 'column'}}>Main Content</Content>
            <Bottom >Bottom Section</Bottom>
        </Layout>
    );
};

export default App;

API

Props

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles to apply directly to the component’s root element.
class	string	""	Additional CSS classes to apply to the component
ref	BaseComponentRef	undefined	Retrieves the component’s DOM element and assigns it to a variable. The HTML element can be accessed using the element property of the returned ref object.
basis	number	auto	Sets the flex-basis of the component as a percentage. For example, a value of 30 sets the flex-basis to 30%.

Guide

Accessing the HTML element

To access the HTML DOM element of the Content component.

1. Declare a variable to hold the ref but don’t initialize it with a value
2. The declared value should have a type of BaseComponentRef, which you need to import
3. Set the declared variable as the value of the ref prop of the Content component

Example

import Layout from '@components/Layout/Layout/Layout';
import Top from '@components/Layout/Top/Top';
import Content from '@components/Layout/Content/Content';
import Bottom from '@components/Layout/Bottom/Bottom';
import { BaseComponentRef } from '@components/types/ComponentProps';

const App = () => {
    let contentRef!: BaseComponentRef

    return (
        <Layout ref={contentRef}>
            <Top>Top Section</Top>
            <Content ref={contentRef}>Main Content</Content>
            <Bottom>Bottom Section</Bottom>
        </Layout>
    );
};

Now you can access the HTML element of contentRef with contentRef.element and make modifications to it if needed.