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.

Readme

Keywords

Package Sidebar

Install

npm i graphql-syntax-highlighter-react

Weekly Downloads

49

Version

0.4.0

License

MIT

Unpacked Size

59.9 kB

Total Files

21

Last publish

Collaborators

  • apollo-bot
  • daniman
  • jbaxleyiii