Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow for properties to be set on the root node #11

Merged
merged 1 commit into from Sep 13, 2018

Conversation

Projects
None yet
2 participants
@Everspace
Copy link
Contributor

commented Aug 25, 2018

I might want to set the className or style on the div produced from an AST blob.

Like so:

// Ast.js
import React from "react"
import rehypeReact from "rehype-react"
import * as components from "components/markdownComponents"

const renderAst = new rehypeReact({
  components,
  createElement: React.createElement,
}).Compiler

const Ast = ({ ast, ...props }) => {
  ast.properties = props
  return renderAst(ast)
}

export default Ast

//gatsby page.js
import React from "react"
import { graphql } from "gatsby"
import Ast from "./Ast"

export const query = graphql`
  {
    allMarkdownRemark {
      edges {
        node {
          htmlAst
          frontmatter {
            title
          }
        }
      }
    }
  }
`

export default ({ data }) => {
  let result = data.allMarkdownRemark.edges
    .map({node: {htmlAst, frontmatter: {title}}} => (
      <div key={title}>
        <h2>{title}</h2>
        <Ast className="content" ast={htmlAst}/>
      </div>
    ))

  return result
}

This allows me to style a content block without an extra div nesting it, or perhaps tag and identify what came from renderAst()

Allow for properties to be set on the root node
I might want to set the className or style on the div produced from an AST blob.

Like so:

```
// Ast.js
import React from "react"
import rehypeReact from "rehype-react"
import * as components from "components/markdownComponents"

const renderAst = new rehypeReact({
  components,
  createElement: React.createElement,
}).Compiler

const Ast = ({ ast, ...props }) => {
  ast.properties = props
  return renderAst(ast)
}

export default Ast

//gatsby page.js
import React from "react"
import { graphql } from "gatsby"
import Ast from "./Ast"

export const query = graphql`
  {
    allMarkdownRemark {
      edges {
        node {
          htmlAst
          frontmatter {
            title
          }
        }
      }
    }
  }
`

export default ({ data }) => {
  let result = data.allMarkdownRemark.edges
    .map({node: {htmlAst, frontmatter: {title}}} => (
      <div key={title}>
        <h2>{title}</h2>
        <Ast className="content" ast={htmlAst}/>
      </div>
    ))

  return result
}
```

This allows me to style a content block without an extra div nesting it, or perhaps tag and identify what came from `renderAst()`
@rhysd

This comment has been minimized.

Copy link
Owner

commented Sep 13, 2018

Thank you for this patch. Looks good.

@rhysd rhysd merged commit fc9c48d into rhysd:master Sep 13, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.