react-apiembed

React components encapsulating functionality of apiembed. Allows you to generate code snippets from HARs, all in the browser, with the power of react. Examples

Built with:

• react
• httpsnippet(https://github.com/kong/httpsnippet)
• prismjs - Prism is a lightweight, extensible syntax highlighter.

React components included

• <CodeSnippet .../> - Render a code snippet from a HAR.
• <CodeSnippetWidget .../> - Tabbed UI for selecting languages to render individual CodeSnippets
• <Apiembed .../> - WIP

Setup

yarn install # or npm install

Usage

Using as a ES module:

import React from "react" import { render } from "react-dom" import { CodeSnippet, CodeSnippetWidget } from "react-apiembed" class MyApp extends React.Component { render() { const har = { method: "POST", url: "http://mockbin.com/request", httpVersion: "HTTP/1.1", queryString: [{ name: "foo", value: "bar" }, { name: "foo", value: "baz" }], headers: [ { name: "Accept", value: "application/json" }, { name: "Content-Type", value: "application/json" } ], cookies: [{ name: "foo", value: "bar" }, { name: "bar", value: "baz" }], postData: { mimeType: "application/json", text: '{"foo": "bar"}' } } return ( <div> <CodeSnippet har={har} prismLanguage="javascript" target="javascript" client="jquery" /> <CodeSnippetWidget har={har} snippets={[ { prismLanguage: "go", target: "go" }, { prismLanguage: "bash", target: "shell", client: "curl" } ]} /> </div> ) } } render(<MyApp />, document.getElementById("root"))

Props

<CodeSnippet/>

Name	Required	Default	Type	Description
har	✔		Object	HAR Request object as outlined here
prismLanguage	✔		String	Prism languages. Currently supports: bash, javascript, php, go, ruby, ocaml, ruby, java, python, swift, csharp, clike
target	✔		String	httpsnippet target prop e.g. "node", "javascript", "shell", "go" etc.
client		null	String	httpsnippet client prop. e.g. "xhr", "curl" etc.

<CodeSnippetWidget/>

Name	Required	Type	Description
har	✔	Object	HAR Request object as outlined here
snippets	✔	Object	Array of snippet objects

snippet properties

Name	Required	Default	Type	Description
prismLanguage	✔		String	Prism languages. See above for supported languages.
target	✔		String	httpsnippet target prop e.g. "node", "javascript", "shell", "go" etc.
client		null	String	httpsnippet client prop. e.g. "xhr", "curl" etc.

Testing

npm run test