react-apiembed

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