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.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.4.0
    32
    • latest

Version History

Package Sidebar

Install

npm i graphql-syntax-highlighter-react

Weekly Downloads

72

Version

0.4.0

License

MIT

Unpacked Size

59.9 kB

Total Files

21

Last publish

Collaborators

  • apollo-bot
  • daniman
  • jbaxleyiii