Code-editor

Code editor is the component we mostly use to show live examples, code and props for our common components in trinidad-ui.

Code-editor makes use of a third-party library called react live to render, display code and manage props. There are options to live edit the code and also play around with and toggle props. It uses Zustand to keep the states, and react-element-to-jsx-string to parse the examples to strings for react-live to handle.

There is a toolbox that handles configuration tab. It is populated based on the default props for the current component. Currently supports booleans, enums and unions.

Code examples

This is an example of the implementation for button component.

// Import the scope for the code editor
import { Button, Icon } from 'trinidad-ui';
// Import examples
import { Focus, Primary, Secondary, ButtonIcon } from './examples';
// Import code'editor
import CodeEditor from "@components/code-editor/code-editor";

<CodeEditor examples={[Focus, Primary, Secondary, ButtonIcon]} scope={{Button, Icon}} />



// This is what the focus.js example looks like
import { Button } from 'trinidad-ui';

export default function Focus(props) {
  return (
    <Button focus {...props}>Focus Button</Button>
  );
}

Props table