UNPKG

mediasfu-reactnative

Version:
70 lines (69 loc) 2.4 kB
import React from 'react'; /** * Interface defining the props for the SubAspectComponent. */ export interface SubAspectComponentOptions { /** * The background color of the component. */ backgroundColor: string; /** * The child elements to be rendered inside the component. */ children: React.ReactNode; /** * Flag to show or hide the controls. * @default true */ showControls?: boolean; /** * The fraction of the window width to be used for the component's width. */ containerWidthFraction?: number; /** * The fraction of the window height to be used for the component's height. */ containerHeightFraction?: number; /** * The default sub-aspect fraction to be used if controls are shown. * @default 0.0 */ defaultFractionSub?: number; } export type SubAspectComponentType = (options: SubAspectComponentOptions) => JSX.Element; /** * SubAspectComponent is a flexible sub-container for media or content displays, adjusting its dimensions * based on screen size and optional control visibility. * * @param {Object} props - Properties for configuring the SubAspectComponent. * @param {string} props.backgroundColor - Background color of the component. * @param {React.ReactNode} props.children - The elements to render inside the component. * @param {boolean} [props.showControls=true] - Whether to display the sub-aspect; affects height calculation. * @param {number} [props.containerWidthFraction=1.0] - Fraction of window width used for component width. * @param {number} [props.containerHeightFraction=1.0] - Fraction of window height used for component height. * @param {number} [props.defaultFractionSub=0.0] - Height fraction adjustment when `showControls` is `true`. * * @example * ```tsx * import React from 'react'; * import { SubAspectComponent } from 'mediasfu-reactnative'; * * function App() { * return ( * <SubAspectComponent * backgroundColor="#e0e0e0" * showControls={true} * containerWidthFraction={0.8} * containerHeightFraction={0.15} * defaultFractionSub={0.5} * > * <Text>Content inside sub-container</Text> * </SubAspectComponent> * ); * } * * export default App; * ``` */ declare const SubAspectComponent: React.FC<SubAspectComponentOptions>; export default SubAspectComponent;