graphql-syntax-highlighter-react

0.4.0 • Public • Published

A React component for GraphQL syntax highlighting.

Example usage: import { GraphqlCodeBlock } from 'graphql-syntax-highlighter-react';

<GraphqlCodeBlock
  className="GraphqlCodeBlock"
  queryBody="query getData($eventId: Int!) {event(id: $eventId) {name,... eventFields ... on Event{attendees(first: 5)}}}"
/>

The components only takes two props: className and queryBody, queryBody being a graphql query string (unformatted ok). If you add the class GraphqlCodeBlock, you will get some default css. Else, you can write your own css for highlighting certain syntax.

/graphql-syntax-highlighter-react/

    Package Sidebar

    Install

    npm i graphql-syntax-highlighter-react

    Weekly Downloads

    50

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    59.9 kB

    Total Files

    21

    Last publish

    Collaborators

    • apollo-bot
    • daniman
    • jbaxleyiii