From 5a8f9bff4134519b477eb7db85940597c3f8a78b Mon Sep 17 00:00:00 2001 From: Valeriy Date: Mon, 4 Feb 2019 04:01:55 +0300 Subject: [PATCH] feat(guide): add an example of custom component --- .../components/example/Component/index.js | 80 +++++++++++++++++++ .../english/components/example/index.md | 8 ++ mock-guide/english/components/index.md | 14 ++++ 3 files changed, 102 insertions(+) create mode 100644 client/src/templates/Guide/components/example/Component/index.js create mode 100644 mock-guide/english/components/example/index.md create mode 100644 mock-guide/english/components/index.md diff --git a/client/src/templates/Guide/components/example/Component/index.js b/client/src/templates/Guide/components/example/Component/index.js new file mode 100644 index 0000000000..8509750c93 --- /dev/null +++ b/client/src/templates/Guide/components/example/Component/index.js @@ -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 ( +
+ {ReactDOM.createPortal(this.state.counter, this.state.span)} + {ReactDOM.createPortal( + , + this.state.div + )} +
+ ); + } +} + +const ExampleComponent = props => { + const { + data: { + markdownRemark: { html } + } + } = props; + return ( + +
+ + + ); +}; + +ExampleComponent.displayName = 'ExampleComponent'; +ExampleComponent.propTypes = propTypes; +export default ExampleComponent; + +export const pageQuery = graphql` + query ExampleComponent($id: String!) { + markdownRemark(id: { eq: $id }) { + html + ...ArticleLayout + } + } +`; diff --git a/mock-guide/english/components/example/index.md b/mock-guide/english/components/example/index.md new file mode 100644 index 0000000000..6e92521fc5 --- /dev/null +++ b/mock-guide/english/components/example/index.md @@ -0,0 +1,8 @@ +--- +title: Example component +component: example/Component/index.js +--- +## Example component + +We can place inline component: . +Or place block component:
diff --git a/mock-guide/english/components/index.md b/mock-guide/english/components/index.md new file mode 100644 index 0000000000..b7cf819e95 --- /dev/null +++ b/mock-guide/english/components/index.md @@ -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`.