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.
label		null	String	Override the tab label.

Testing

npm run test