How to render Components brought from Component Library (Ex: material-ui react)

[ethanny2]

This library seems great so far, but I have my own components that are built using Material UI React's component library and I was wondering how do I render those components as an example

Ex:

import {Box} from '@material-ui/core';
/**
 * Some documented component
 *
 * @component
 * @example
 *  <Box size={size}> </Box> 
 */
const Test = ({size}) =>(
   <Box size={size}> </Box> 
)

When I generate the docs will it detect the used component as an import and bring it in or is there any extra steps/ is this not possible with this library?

[Gi-wq]

I’ve a similar problem, the only way that i found to use external component in @example is tags it as @componet.

Starting from this: https://github.com/SoftwareBrothers/better-docs#mixing-components-in-preview
In component 1 you can import and use any external react modules

In your case, Have you try to test something like this?

/**
 * Some documented component
 *
 * @component
 * @example
 *  <Test size=‘4’/>
 */
const Test = ({size}) =>(
   <Box size={size}> </Box> 
)