React
@graphiql/react
[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphiql-react/CHANGELOG.md) | [API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html) | [NPM](https://www.npmjs.com/package/@graphiql/react)
Charts
react
graphql
sdk
monaco-editor
monaco-graphql
monaco
@graphiql/react
Charts
javascript
npm
Stars
304
Weekly
813k
Open issues
4
Bundle
~25 kB
Installation
npm install @graphiql/reactCode example
import { React } from "@graphiql/react";
const data = [
{ name: "Jan", value: 12 },
{ name: "Feb", value: 18 },
];
export function Example() {
return (
<React data={data} width={420} height={240}>
{/* series / axes from React */}
</React>
);
}Pros & cons
Pros
- Actively maintained by benjie
- 813k weekly downloads. Battle tested
- First-class TypeScript definitions
- MIT licensed
Considerations
- Adds roughly ~25 kB to your bundle
- Needs client-only rendering in SSR frameworks
- Not supported in React Native
- 4 open issues on GitHub