# react-lincoln

> Meet Lincoln, a React component for rendering OpenAPI v3 definitions.

Latest version **0.4.1** (published 2018-02-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-lincoln
pnpm add react-lincoln
yarn add react-lincoln
bun add react-lincoln
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2018-02-23 |
| First published | 2017-07-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=6 |
| Dependencies | 15 |
| Unpacked size | 619.6 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 152 |
| Maintainers | robot.grylls |
| Keywords | OpenAPI, OpenAPI specification, swagger, react, API |

## Links

- npm: https://www.npmjs.com/package/react-lincoln
- Repository: https://github.com/temando/open-api-renderer
- Homepage: https://github.com/temando/open-api-renderer#readme
- Issues: https://github.com/temando/open-api-renderer/issues
- npm.io page: https://npm.io/package/react-lincoln

## Dependencies (15)

- [qs](https://npm.io/package/qs.md) ^6.4.0
- [jss](https://npm.io/package/jss.md) ^7.1.7
- [color](https://npm.io/package/color.md) ^2.0.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [history](https://npm.io/package/history.md) ^4.6.3
- [js-yaml](https://npm.io/package/js-yaml.md) ^3.8.4
- [react-jss](https://npm.io/package/react-jss.md) ^6.1.1
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8
- [markdown-it](https://npm.io/package/markdown-it.md) ^8.3.1
- [fetch-everywhere](https://npm.io/package/fetch-everywhere.md) ^1.0.5
- [copy-to-clipboard](https://npm.io/package/copy-to-clipboard.md) ^3.0.6
- [react-document-title](https://npm.io/package/react-document-title.md) ^2.0.2
- [json-schema-ref-parser](https://npm.io/package/json-schema-ref-parser.md) ^4.0.4
- [react-scrollable-anchor](https://npm.io/package/react-scrollable-anchor.md) ^0.5.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.4.1 (latest) — 2018-02-23
- 0.4.0 — 2018-01-15
- 0.3.0 — 2017-10-24
- 0.2.1 — 2017-10-18
- 0.2.0 — 2017-09-14
- 0.1.0 — 2017-07-17
- 0.0.6 — 2017-07-07
- 0.0.5 — 2017-07-07

## README

# Lincoln

<img src='assets/lincoln-logo-white.png' alt='Lincoln' height="96" width="96" />

[![NPM](https://img.shields.io/npm/v/react-lincoln.svg)](https://npmjs.org/packages/react-lincoln/)
[![Travis CI](https://img.shields.io/travis/temando/open-api-renderer.svg)](https://travis-ci.org/temando/open-api-renderer)
[![MIT License](https://img.shields.io/github/license/temando/open-api-renderer.svg)](https://en.wikipedia.org/wiki/MIT_License)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

Meet Lincoln, a [React](https://facebook.github.io/react/) component for rendering [OpenAPI](https://www.openapis.org) documents. The project is tracking against [v3.0.0](docs/open-api-v3-support.md) of the OpenAPI specification.

Lincoln aims to support evergreen browsers, such as Chrome, Firefox, Safari and IE11+. It is responsive and should be usable on most modern devices.

[Demo](https://temando.github.io/open-api-renderer/demo/?url=https://temando.github.io/open-api-renderer/petstore-open-api-v3.0.0-RC2.json)

## Installation

```sh
npm install --save react react-dom react-lincoln
```

## Usage

To use Lincoln in your React project:

```js
import React from 'react'
import ReactDOM from 'react-dom'
import Lincoln from 'react-lincoln'

ReactDOM.render(
  <Lincoln definitionUrl='https://temando.github.io/open-api-renderer/petstore-open-api-v3.0.0-RC2.json' />,
  document.body
)
```

Alternatively, you can pass the contents of the definition directly to Lincoln:

```js
import React from 'react'
import ReactDOM from 'react-dom'
import Lincoln from 'react-lincoln'
import definition from './myApi.yml'

ReactDOM.render(<Lincoln definition={definition} />, document.body)
```

## Configuration

The following configuration options are available:

| property                        | required | type    | description                                                                                                                                                                                                                         |
| ------------------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `definitionUrl` or `definition` | ✔        | string  | CORS-enabled URL to, or contents of, OpenAPI v3 document to render. Supports JSON or YAML.                                                                                                                                          |
| `navSort`                       |          | enum    | This property applies when your definition uses `tags`. Valid values are `alpha` which sorts by HTTP method, then path or `false`, which will display paths as defined. Defaults to `false`.                                        |
| `validate`                      |          | boolean | If `true`, uses [Mermade](https://openapi-converter.herokuapp.com/) to validate definition. Defaults to `false`.                                                                                                                    |
| `initialSchemaTreeDepth`        |          | number  | The initial opened tree depth for schema visualiser when first rendered. This is useful when the schema's actual contents is a couple of levels deep, and you want to expand the tree to the contents automatically. Defaults to 0. |
| `navigationMethodDisplayType`   |          | string  | Regulates how the navigation items are rendered - path only, summary only, or both. The possible values are `summary` (default), `path`, or `all`. In case of any other value only the summary is rendered.                         |

## Philosophy

While this project is currently focused on visualising OpenAPI V3 specifications, it is architected in such a way that the React components deal with a `UIReadySchema`, which is a generic specification (admittedly heavily based on OpenAPI V3).

The dream is that this renderer could visualise other formats by introducing new parsers which transform documents into the common `UIReadySchema` format. This approach allows us to build something sustainable and scalable, where the community can help contribute new parsers (among other things!) as required.

The project is definitely in its infancy and we are not ready for that yet, but we hope by sharing this vision early, others can help make it a reality. For contributing information, see [CONTRIBUTING.md](CONTRIBUTING.md).

## Credit

- The [ReDoc](https://github.com/Rebilly/ReDoc) project inspired Lincoln. If you're looking for an alternative renderer, give ReDoc a try!
- [swagger2openapi](https://github.com/mermade/swagger2openapi) which Lincoln uses to validate definitions.

## Maintainers

Lincoln is an open source project from [Temando](http://temando.com/)'s Developer Experience team. Temando connects carriers with retailers and retailers to people. The Temando Platform combines shipping experiences, multi-carrier connectivity and lightning fast fulfillment in one solution. If this sounds like fun, [work with us](http://temando.com/en/about/careers)!

---
_Source: https://npm.io/package/react-lincoln · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
