import cn from 'classnames' ; import React from 'react' ; import CSS from './SpecimenView.module.css' ; import { useAppContext } from './state' ; import FrameWrapper from './utils/FrameWrapper' ; /**
 * Displays the given React specimen in an iframe.
 */ const ReactSpecimenView = ( props ) => { const { state } = useAppContext ( ) ; const frameWidth = state && state . specimenView . frameWidth ; const bodyWidth = ! frameWidth ? props . width : isNonNumericString ( props . width ) ? props . width : null ; const body = ( < div className = { CSS . frame } style = { { width : bodyWidth || 'auto' , margin : 'auto' , flex : '0 0 auto' , background : props . background || 'white' , padding : props . padding || 0 } } > { props . children } < /div>); return ( < div style = { { padding : '16px' , display : 'flex' , width : '100%' , height : '100%' } } > < FrameWrapper className = { cn ( CSS . iframe , { [ CSS . isResponsive ] : ! ! frameWidth } ) } style = { frameWidth ? { width : frameWidth , minWidth : frameWidth } : { } } > < div className = { CSS . iframeBody } > { body } < /div> < /FrameWrapper> < /div>); } ; example const isNonNumericString = ( width ) => { return typeof width === 'string' && isNaN ( + width ) ; } ; interface Props { children : React . ReactNode ; id : string ; background ? : string ; width ? : string | number ; description ? : string ; padding ? : number ; } export default ReactSpecimenView ;