import React , { useEffect } from 'react' ; import toString from 'react-element-to-jsx-string' ; import ReactSpecimenView from './ReactSpecimenView' ; import { useAppContext } from './state' ; import getDisplayName from './utils/getDisplayName' ; const TO_STRING_OPTIONS = { showFunctions : true , displayName : getDisplayName } ; /**
 * Defines a specimen
 */ const Specimen = ( props ) => { const { state , actions } = useAppContext ( ) ; if ( ! state || ! actions ) { throw new Error ( 'Not in a PenpadContext' ) ; } const { children , id , ... otherProps } = props ; useEffect ( ( ) => { actions . addSpecimen ( { id , ... ( 'description' in props ? { description : props . description } : null ) , view : [ ReactSpecimenView , props ] , getCode : ( ) => { let code ; try { code = toString ( children , TO_STRING_OPTIONS ) ; } catch ( e ) { code = `/* Error: ${ e . message } */` ; } return code ; } } ) ; const cleanup = ( ) => { actions . removeSpecimen ( id ) ; } ; return cleanup ; } , [ id , children ] ) ; return null ; } ; interface Props { /** The React nodes to be rendered */ children : React . ReactNode ; /** The name of the specimen */ id : string ; /** Background color */ background ? : string ; /** Width */ width ? : string | number ; /** Description */ description ? : string ; padding ? : number ; } export default Specimen ;