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