mediasfu-reactnative
Version:
MediaSFU Prebuilt React Native SDK
100 lines (99 loc) • 3.26 kB
TypeScript
import React from 'react';
/**
* Interface defining the props for the MainContainerComponent.
*/
export interface MainContainerComponentOptions {
/**
* The background color of the container.
* @default 'transparent'
*/
backgroundColor?: string;
/**
* The child elements to be rendered inside the container.
*/
children: React.ReactNode;
/**
* Fraction of the window width to be used for the container's width.
* @default 1
*/
containerWidthFraction?: number;
/**
* Fraction of the window height to be used for the container's height.
* @default 1
*/
containerHeightFraction?: number;
/**
* Left margin of the container.
* @default 0
*/
marginLeft?: number;
/**
* Right margin of the container.
* @default 0
*/
marginRight?: number;
/**
* Top margin of the container.
* @default 0
*/
marginTop?: number;
/**
* Bottom margin of the container.
* @default 0
*/
marginBottom?: number;
/**
* Padding inside the container.
* @default 0
*/
padding?: number;
}
export type MainContainerComponentType = (options: MainContainerComponentOptions) => JSX.Element;
/**
* MainContainerComponent renders a container with customizable dimensions, margins, and padding.
* The container's width and height adjust based on window size and specified fractions.
*
* This component is responsive to window size changes, recalculating its dimensions dynamically
* and supporting customization of margins, padding, and background color.
*
* @component
* @param {MainContainerComponentOptions} props - Configuration options for MainContainerComponent.
* @param {string} [props.backgroundColor='transparent'] - Background color of the container.
* @param {React.ReactNode} props.children - Elements to render inside the container.
* @param {number} [props.containerWidthFraction=1] - Fraction of window width for container width.
* @param {number} [props.containerHeightFraction=1] - Fraction of window height for container height.
* @param {number} [props.marginLeft=0] - Left margin of the container.
* @param {number} [props.marginRight=0] - Right margin of the container.
* @param {number} [props.marginTop=0] - Top margin of the container.
* @param {number} [props.marginBottom=0] - Bottom margin of the container.
* @param {number} [props.padding=0] - Padding inside the container.
*
* @returns {JSX.Element} The MainContainerComponent with responsive dimensions and customizable styling.
*
* @example
* ```tsx
* import React from 'react';
* import { MainContainerComponent } from 'mediasfu-reactnative';
*
* function App() {
* return (
* <MainContainerComponent
* backgroundColor="lightblue"
* containerWidthFraction={0.9}
* containerHeightFraction={0.8}
* marginLeft={10}
* marginRight={10}
* marginTop={20}
* marginBottom={20}
* padding={15}
* >
* <Text>Main Content</Text>
* </MainContainerComponent>
* );
* }
*
* export default App;
* ```
*/
declare const MainContainerComponent: React.FC<MainContainerComponentOptions>;
export default MainContainerComponent;