Skip to content
React components for generating codesnippets from HARs
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook fix(storybook): https stylesheet Apr 2, 2018
build
dist chore(package) bump version to 0.1.1 Oct 31, 2018
docs 📦 updated storybook docs built files Apr 2, 2018
src
stories
.babelrc
.gitignore
.prettierrc
README.md
package.json
yarn.lock 📦 change hardyhar to point to npm Apr 2, 2018

README.md

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
  • hardyhar - Transform HAR request object to beautiful code snippets. Core lib behind HTTPSnippet cli.
  • 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 hardyhar target prop e.g. "node", "javascript", "shell", "go" etc.
client null String hardyhar 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 hardyhar target prop e.g. "node", "javascript", "shell", "go" etc.
client null String hardyhar client prop. e.g. "xhr", "curl" etc.

Testing

npm run test
You can’t perform that action at this time.