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 use markdown
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!
There are many alternatives. You can roll your own demo if you build the component with nwb namely this feature here.
You can build your component and demo in the same project and deploy them seperately and host it on the projects github pages
But NWB does not provide Markdown support out of the box for the demo.
If you want to do something a little bit more elaborate you can use docusaurus (recently released by facebook) or even storybook (no markdown though)
Docusaurus
Powered by Markdown
Save time and focus on your project's documentation. Simply write docs
and blog posts with Markdown and Docusaurus will publish a set of
static html files ready to serve.
Built Using React
Extend or customize your project's layout by reusing React. Docusaurus
can be extended while reusing the same header and footer.
Ready for Translations
Document versioning
Document search
Personally I've used NWB and Docusaurus and I think I'll stick with Docusaurus for now. But I think it really depends on what you want to do with the demo. If you have a ton of functional features to show than I'd recommend storybook, if it's mainly API based NWB/Docusaurus
Related
Similarly to how you can pass Markdown components to Astro components, I want to import one into a React/Preact component.
It didn't seem to be working directly when I imported the component into the React/Preact, so I tried passing them in from the parent Astro component like so:
<DemoContent
blog={(<Blog />)}
tweet={(<TweetThread />)}
highlight={(<HighlightClips />)}
client:visible
/>
...but that gives me ERROR: Expected ">" but found "/".
What is the suggested way of doing this?
(Follow-up from a discord conversation. Thanks for making this public!)
When passing Astro or Markdown components to a framework like Preact, you'll need to use "slots." You can use slot="prop-name" to wire those up like so:
<DemoContent>
<Blog slot="blog" />
<TweetThread slot="tweet" />
<HighlightClips slot="highlight" />
</DemoContent>
Then, in your Preact component, you can access blog, tweet, and highlight as props. You'll render these similar to the {children} prop:
export function DemoContent({ blog, tweet, highlight }) {
return (
<section>
{blog}
{tweet}
{highlight}
</section>
)
}
These will also map to Vue or Svelte slots if you happen to use those frameworks. Hope this helps!
So I want to use a Swiper library for react. I have multiple movie elements, and I want to swipe through them. I import it like this:
import Swiper from 'react-id-swiper';
And I use it that way:
<div className="carousel-container">
<Swiper>
{movies.map(movie =>
<MovieItem movie={movie} key={movie.title}/>
)}
</Swiper>
</div>
So it should make a horizontal slider with movie items, but on the page it looks like this:
So it's like I just put all the movies inside of a common div, although when I open the code in the browser, all movies are inside of swiper div with all the classes, so I'm not sure why it doesn't work the way it should. Maybe the problem is because I use .tsx file?
The issue is lack of css/styling.
The documentation on react-id-swiper is old. According to the documentation on the main module it uses (swiperjs) you need to add the styling/css like so:
import "swiper/css";
I've created a sandbox for you to see it working here
I'm trying to render some html, stored in a DB, and put a component inside.
It'd look like this:
import ReactMarkdown from 'react-markdown/with-html';
const inlineCode = (props) => <Gist id={props.value} />;
const source = '`7df0c9a5d794504a28bd3256b7bf5c4f` <p>asdasdasd</p><h1>title</h1>';
ReactMarkdown is used like this:
<ReactMarkdown source={source} renderers={{ inlineCode }} escapeHtml={false} />
The result is is rendered properly and the block is also, but isn't, the contents are outside of the block.
If I wrap the whole source with a <div>, the <Gist/> is rendered as text and <p>/<h1> are rendered properly.
What am I missing? I'm trying to store html with custom components inside, <Gist/> is just an example. Suggestions for a (more) suitable library are also welcome. Example ideal source I'd like to store in a db and then render in a React component:
<div>
<p>
<CustomReactComponent/>
<br/>
test
</p>
<Gist/>
</div>
Okay I found this lib: https://github.com/probablyup/markdown-to-jsx
If your source looks like:
const source = `<gist id="yourIdHere" /> <h1>asdasdasd</h1>`;
<Markdown
options={{
overrides: {
gist: {
component: renderGist,
},
},
}}
>
{content}
</Markdown>
It renders both the <Gist> and the normal <h1> as <h1. Paragraph tags seem to be automatically added if you add line breaks and something like # Title is also automatically wrapped.
<Gist> in source is converted to lowercase, so it'd only matter for the overrides object (lowercase again). Handles all my custom stuff and html predictably.
My issue is specifically related to debugging those elements that render on the [root] via the virtual DOM. Most specifically, the materialUI AutoComplete component. I need to style it to fit several color themes, therefore I can't use style:{{color:#eee}} because that would override the default color and replace it by a new one. Instead I need to play around with specificity to make it white, or black, or red, etc, according to the parent theme that I am using.
Anyway, It is impossible for me to inspect it in Chrome Dev Tools because once the mouse leaves the autoComplete input, the dropdown closes and I can't inspect it. Normally, I counter this by using debugger; or The Sources section of Chrome Dev Tools but reactJS scripts compile and bundle through webpack, so they are impossible to access in dev tools as well.
Does anyone know how I can stop a reactJS script at the Autocomplete line in the component class?
class Header extends React.Component {
render() {
return (
<section>
<div> SOme code here</div>
//debug somewhere inside the autocomplete below to stop it as it renders
<AutoComplete
className='search-item'
style={{width: '100%'}}
hintText="Type anything"
filter={AutoComplete.caseInsensitiveFilter}
fullWidth={true}
dataSource={shortcutsData}
/>
</section>
);
}
}
The link below shows the non-reactJS way. Which doesn't work for me
How to pause JS script execution at a specific line?
Thanks in advance
You can place a debugger tag anywhere in the js script and it gets paused on runtime, something like this
debugger;
For example, if I have to place it in your code then
class Header extends React.Component {
render() {
debugger;
return (
<section>
<div> SOme code here</div>
//debug somewhere inside the autocomplete below to stop it as it renders
<AutoComplete
className='search-item'
style={{width: '100%'}}
hintText="Type anything"
filter={AutoComplete.caseInsensitiveFilter}
fullWidth={true}
dataSource={shortcutsData}
/>
</section>
);
}
}
And it will get paused there when you run the app.
Hope this helps!
I have this simple React JS + Redux app.
Decided to create a version of it using Onsen UI, I'm receiving no errors and there's output but the Onsen UI isn't rendered at all.
Here is the pic:
Here is my render function :
render() {
return (
<Ons.Page renderToolbar={this.renderToolbar}>
<Ons.List dataSource={this.props.listingData} renderRow={(listingData, index) => (
<Ons.ListItem tappable key={index} modifier='longdivider' >
<div className={'list' + listingData.location_id}>{listingData.location_id}</div>
<div>{listingData.location}</div>
<div>{listingData.description}</div>
</Ons.ListItem>)} />
<div><div onClick={this.stateToEntry} className="addButton">Add</div><div onClick={this.stateToEdit} className="editButton">Edit</div><div onClick={this.stateToDelete} className="deleteButton">Delete</div></div>
</Ons.Page>
);
}
Here is my renderToolbar function:
renderToolbar() {
return (
<Ons.Toolbar>
<div className='center'>My app</div>
<div className='right'>
<Ons.ToolbarButton /*onClick={}*/>
<Ons.Icon icon='md-more-vert' />
</Ons.ToolbarButton>
</div>
</Ons.Toolbar>
);
}
I've checked the modules are all imported, I also bind the functions in my constructor so it should work but why do I not have any UI?
PS: I'm using Onsen v2.0 & React-Onsenui 0.6.2
Anything I missed? Or is there something wrong in my code?
Unlike React native's way of styling its components Onsen UI has normal CSS files, which need to be included in order for it to work properly.
You can add them via link tags to the dom or if you're using webpack you can just require them.
The files should be something like
onsenui/dist/css/onsenui.css
onsenui/dist/css/onsen-css-components.css
You said you're not getting any errors in the console, so a lack of styles seems like the most likely cause.
Also if you're interested you can checkout the repo of a demo kitchensink app here.
And finally this may be a little off-topic, but you could try monaca cli as with it you can easily start from a working boilerplate.