I would like to make a demo page for my React component.
And I want to make it like http://www.material-ui.com/#/components/flat-button, which has:
- some description of
props. I would like to usemarkdown - demo of component
- the code that shown demo section
Currently, I have a file like this (Typescript)
import * as React from "react";
export default class SimpleExamples extends React.Component<{}, {}> {
constructor(props: {}) {
super(props);
}
handleChange(event: React.ChangeEvent<HTMLElement>): void {
// Do something here
}
render() {
return (
<div>
<p><code>MyComponent </code> is bla bla bla with <code>value</code> prop and <code>onChange</code> prop.</p>
<p> You can make it like this or like that ... etc </p>
<MyComponent value={this.state.value} onChange={event => this.handleChange(event) } />
<br />
<div style={{ marginTop: 12, marginBottom: 12 }}>
<CodeExample />
</div>;
</div>
);
}
}
It looks messy, and CodeExample shows the whole file which is I don't want.
I want it to show just the demo like this:
<MyComponent value={this.state.value} onChange={event => this.handleChange(event) } />
I thought about split the demo to a seperate file. But then, there will be a lot of them.
Any idea to achieve that? Thanks in advance!
