open-index/open-npm huggingface dataset:
npm package: @stoplight/request-maker
Description: Request Maker Component for Studio
Author: Stoplight
Latest version: 3.7.0

# @stoplight/request-maker

[![Maintainability](https://api.codeclimate.com/v1/badges/46f90acacb6a47e95a24/maintainability)](https://codeclimate.com/repos/5c62ee53228025780f01387b) [![Test Coverage](https://api.codeclimate.com/v1/badges/46f90acacb6a47e95a24/test_coverage)](https://codeclimate.com/repos/5c62ee53228025780f01387b)

A set of components used to craft http requests and view their responses.

- Explore the components: [Storybook](https://stoplightio.github.io/request-maker)
- View the changelog: [Releases](https://github.com/stoplightio/request-maker/releases)

![Request Maker](https://user-images.githubusercontent.com/7423098/68486055-ff53de80-0205-11ea-81f8-85ff55e2e4ab.png)

## Getting Started

First of all you need to add the library and all of the peer dependencies:

```bash
# Install the request maker
yarn add @stoplight/request-maker

# Install the peer dependencies
yarn add @stoplight/ui-kit mobx prismjs react react-dom @stoplight/prism-http
```

## Usage

In order to manage component state, you need to create an instance of the `RequestMakerStore` and pass it to the `RequestMakerProvider`.

You can construct the store from scratch or from an existing [http request](https://github.com/stoplightio/types/blob/master/src/http.ts#L14) or [http operation](https://github.com/stoplightio/types/blob/master/src/http-spec.ts#L32).

Here's an example using an http request:
```tsx
// Initialize the store with request data
const store = new RequestMakerStore({
  request: {
    method: 'get',
    url: 'https://stoplight.io',
  }
});

// Add a content-type header
store.headerParams.push({
  name: 'content-type',
  value: 'application/json',
  isEnabled: true,
});

return (
  <RequestMakerProvider value={store}>
    <RequestEndpoint />

    <RequestEditor />

    <ResponseViewer />
  </RequestMakerProvider>
)
```