Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

react-apiembed

Package Overview
Dependencies
6
Maintainers
2
Versions
5
Issues
File Explorer

Advanced tools

react-apiembed

React api embed component.

    0.1.4latest

Version published
Maintainers
2
Yearly downloads
14,489
decreased by-27.09%

Weekly downloads

Readme

Source

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

NameRequiredDefaultTypeDescription
harObjectHAR Request object as outlined here
prismLanguageStringPrism languages. Currently supports: bash, javascript, php, go, ruby, ocaml, ruby, java, python, swift, csharp, clike
targetStringhttpsnippet target prop e.g. "node", "javascript", "shell", "go" etc.
clientnullStringhttpsnippet client prop. e.g. "xhr", "curl" etc.

<CodeSnippetWidget/>

NameRequiredTypeDescription
harObjectHAR Request object as outlined here
snippetsObjectArray of snippet objects

snippet properties

NameRequiredDefaultTypeDescription
prismLanguageStringPrism languages. See above for supported languages.
targetStringhttpsnippet target prop e.g. "node", "javascript", "shell", "go" etc.
clientnullStringhttpsnippet client prop. e.g. "xhr", "curl" etc.

Testing

npm run test
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc