CODEWITHSUNDEEP
reactjsdocusaurus
AlainIb
AlainIb

Reputation: 4728

make a code preview for documentation with Reactjs

I'm trying to create a component who display source's code passed as props to write documentation of a library i work on with Docusaurus. Like html <code> or exactly like this (the blue part) :

https://mui.com/components/radio-buttons/

enter image description here

This is a simplified code

import React from 'react';

export default function Preview({title, description, component, code, rawComponent}) {
  return (
    <div>
      <div><h1>{title}</h1></div>
      <div>{description}</div>

      <div>{component}</div>

      <details>
        <summary>Source</summary>
        <pre>
          <code>{code}</code>
        </pre>
      </details>
    </div>
  );
}

PROBLEM : i can't found how to pass code as props ....

<Preview
  title={'Quick start'}
  description={'Yes, this really is all you need to get started, as you can see in this live and interactive demo:'}
  component={<HomepageFeatures />}
  code={
    `
      import * as React from 'react';
      import ReactDOM from 'react-dom';
      import HomepageFeatures from 'newlib';

      function App() {
          return <HomepageFeatures />;
      }
  `} 
/>

this also doesn't work

<Preview
  title={'Quick start'}
  description={'Yes, this really is all you need to get started, as you can see in this live and interactive demo:'}
  component={<HomepageFeatures />}
  code={
     ```
      import * as React from 'react';
      import ReactDOM from 'react-dom';
      import HomepageFeatures from 'newlib';

      function App() {
          return <HomepageFeatures />;
      }
      ```  
  }
/>

How to pass the code block ???

EDIT : a jsfildle https://jsfiddle.net/2pnc4htm/

it's work in pure reactJS, so it's Docusaurus who mess up ...

Thank you for reading

Upvotes: 0

Views: 781

Answers (1)

Niklas Burggraaff
Niklas Burggraaff

Reputation: 121

I believe the issue is that the curly braces are not required for the props. This only needs to be done for the in-line style of a component.

More information can be found here https://docusaurus.io/docs/next/markdown-features/react (in their examples they don’t use curly braces unless for the style)

Upvotes: 1

Related Questions