feat(guide): add an example of custom component

This commit is contained in:
Valeriy
2019-02-04 04:01:55 +03:00
committed by Stuart Taylor
parent 6a93b44aca
commit 5a8f9bff41
3 changed files with 102 additions and 0 deletions

View File

@ -0,0 +1,80 @@
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { graphql } from 'gatsby';
import ArticleLayout from '../../ArticleLayout';
const propTypes = {
data: PropTypes.object
};
class CustomClickCounter extends React.Component {
state = {
init: false,
span: null,
div: null,
counter: 0
};
initComponent() {
const span = document.getElementById('example-component_span');
const div = document.getElementById('example-component_div');
this.setState({ init: true, span, div });
}
handleClick = () => {
this.setState(state => ({ counter: state.counter + 1 }));
};
componentDidMount() {
this.initComponent();
}
render() {
if (!this.state.init) {
return null;
}
return (
<div>
{ReactDOM.createPortal(this.state.counter, this.state.span)}
{ReactDOM.createPortal(
<button onClick={this.handleClick}>Click me!</button>,
this.state.div
)}
</div>
);
}
}
const ExampleComponent = props => {
const {
data: {
markdownRemark: { html }
}
} = props;
return (
<ArticleLayout {...props}>
<article
className='article'
dangerouslySetInnerHTML={{ __html: html }}
id='article'
tabIndex='-1'
/>
<CustomClickCounter />
</ArticleLayout>
);
};
ExampleComponent.displayName = 'ExampleComponent';
ExampleComponent.propTypes = propTypes;
export default ExampleComponent;
export const pageQuery = graphql`
query ExampleComponent($id: String!) {
markdownRemark(id: { eq: $id }) {
html
...ArticleLayout
}
}
`;

View File

@ -0,0 +1,8 @@
---
title: Example component
component: example/Component/index.js
---
## Example component
We can place inline component: <span id='example-component_span'></span>.
Or place block component: <div id='example-component_div'></div>

View File

@ -0,0 +1,14 @@
---
title: Components
---
## Components
We can use custom components for guide articles. Add
```yml
component: path/to/component
```
to an article frontmatter to use your component. Your component should be
located in `client/src/templates/Guide/components/path/to/component`.