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/
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
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)
Related
I found a React lightbox example here. I am trying to make slight modifications to it and one of those modifications is that I want to include it in another component. I attempted to do that by changing render(<App />, document.getElementById('app')); to export default App and then importing it into my component. But when I do that I get Cannot read property '0' of undefined Here's how I am importing it:
import React from "react";
import LB from "./LB";
import "./styles.css";
export default function App() {
return <LB />;
}
Here's my attempt
<div>
<div onClick={this.openLightbox}>Click Me</div>
<Lightbox
views={photos}
onClose={this.closeLightbox}
onClickPrev={this.gotoPrevious}
onClickNext={this.gotoNext}
currentImage={this.state.currentImage}
isOpen={this.state.lightboxIsOpen}
/>
</div>
You were passing incorrect prop. Never rely on some dubious examples, always refer to the docs. "images" should be "views"
I am trying to pass a property through react components and display the text property of that element I get know JSX sytax errors but I get Parsing error: Unterminated JSX contents.When attempting to display the text from the property but instead it's blank as if its not reading the property
Components.js
import React from "react"
function Components(props) {
return (<div>
<h1 style={style}>COMPONENT.js</h1>
<div>{props.text}</div>
</div>)
}
export default Components
App.js
import React from 'react';
import Component from "./component"
function App() {
return (
<div>
The Big World
<Component text="PROPERTY TEXT"/>
</div>
);
}
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
Expecting to see the property text to be pass through the Component property and displayed on the page
All looks clear. Try to add semicolon an the end of return statement:
function Components(props) {
return (
<div>
<h1 style={style}>COMPONENT.js</h1>
<div>{props.text}</div>
</div>
);
}
Ran all this in a codesandbox and other than style not being defined it all renders and runs fine. I also don't think it is an error with a typo in your posted code (the file is actually components.js and not component.js), because that shouldn't transpile at all since it can't find that file.
I'm not sure if I'm explaining what I want right. Here's an example of what I'm trying to do:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class ExampleChild extends Component {
render() {
return (
<p>Hello!!</p>
);
}
}
class ExampleParent extends Component {
render() {
return (
<div>
<ExampleChild />
Here's the ExampleChild code:
{ExampleChild.toString()}
</div>
);
}
}
ReactDOM.render(<ExampleParent />, document.getElementById('root'));
An get the following output to the DOM, with all the correct indentations and spaces of the actual code:
Hello!!
Here's the ExampleChild code:
render() {
return (
< p >Hello!!< /p >
);
}
If the child component is just a stateless, functional component, I can do a .toString(), but it returns it in pure Javascript. It doesn't return it in the JSX format, or with the original returns, and indentations. I would also like to be able to do this with React class components as well. Is there maybe a library that does this?
You could use renderToStaticMarkup from react-dom/server, but only for the resulting HTML markup.
import React from "react";
import { render } from "react-dom";
import { renderToStaticMarkup } from "react-dom/server";
import Hello from "./Hello";
const App = () => (
<div>
<p>Component:</p>
<Hello name="CodeSandbox" />
<p>As HTML:</p>
<pre>{renderToStaticMarkup(<Hello name="CodeSandbox" />)}</pre>
</div>
);
render(<App />, document.getElementById("root"));
Check it out on CodeSandbox.
If you want the whole JSX file, you could import with something like raw-loader and print it inside pres as well.
I ended up using the react syntax highlighting library react-syntax-highlighter
I created an npm script to make copies of my react components and exported them as template literals. Which, then would be displayed via react-syntax-highlighter.
Working example: ryanpaixao.com
I didn't go with raw-loader because I didn't want to eject my create-react-app. (I would've had to in order to configure webpack) Also, it seems that I would've had to set all .js files to be imported as strings (maybe there's a way around that).
If I understand right the shallow test must not go deeper the the module which is been tested. Why do I get the displayed error?
App.js looks like:
import * as React from 'react';
import './css/app.css';
import Router from './Router';
import Map from './containers/Map';
import MainTools from './components/ui/MainTools';
class App extends React.Component {
render() {
return (
<div className="App">
<Map />
<MainTools />
<Router />
</div>
);
}
}
export default App;
MapActions.tsx is used inside Map.
Thanks!
It doesn't mount the children components but it still is going to import the files and when it hits an import it can't find there will still be an error. You are probably trying to import an object that doesn't exist.
I'm trying to get familiar with react and web development. And made my first steps.
Right now I'm using react with react-bootstrap & css modules.
In the main.html I had to include the bootstrap.css file.
I would like to replace my searchbar with react-autosuggest
It seems like bootstrap is breaking the style of react-autosuggest. Is it possible to combine both? Or is it a bad practice?
That is my code where I tried to use both searchbars:
import React, {Component} from 'react';
import styles from './App.css';
import Search from "./Search/Search"
import SearchAuto from "./SearchAuto/SearchAuto"
class App extends Component {
render() {
return (
<div>
<div className={styles.App}>
<h1>Title</h1>
<Search onSearch={this.searchForAddress}/>
</div>
<SearchAuto onSearch={this.searchForAddress}/>
</div>
);
}
}
export default App;
Any help would be greatly appreciated!