Code-viewer

Code-viewer is an extension of and a slim version of code-editor. It is used for live demos of components on the UX usage tab, but also for advanced examples of components that code-viewer currently not has support for.

The code-viewer don't have support for the configuration tab where the users can play with props for the component. It's intended to be used to display a quick overview of a component and to display the code for the component in the current demo.

Code examples

This is an example of the implementation for button component.

import CodeViewer from '@components/code-viewer/code-viewer';
import Primary from './code/examples/interactive-demo/primary';
import Secondary from './code/examples/interactive-demo/secondary';

<CodeViewer>
  <Primary/>
  <Secondary/>
</CodeViewer>

// primary.js looks like this
import CodeViewerExample from '@components/code-viewer/code-viewer-example';
import { Button } from 'trinidad-ui';

export default function Primary(props) {
  return (
    <CodeViewerExample>
      <Button inverted {...props}>Button</Button>
    </CodeViewerExample>
  );
}

Simply create one or more react components in .js files which you then wrap in the CodeViewerExample component. Then you import your newly created components and submit them as children to the code-viewer component. The tab system is autogenerated in the code-viewer component where the name of your component also becomes the names of the tab.

Props table

Code-viewer takes only on prop and that is readOnly. All other props are spread to and used by code-editor.Check out code-editor docs.