react-apiembed

0.1.9 • Public • Published

react-apiembed

version

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 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

Readme

Keywords

none

Package Sidebar

Install

npm i react-apiembed

Weekly Downloads

605

Version

0.1.9

License

MIT

Unpacked Size

72.7 kB

Total Files

4

Last publish

Collaborators

  • darrenjennings
  • konginc