# Getting Started

## Installation

```bash
npm install @prose-reader/core @prose-reader/react-reader @chakra-ui/react @emotion/react rc-slider react-icons reactjrx
```

This package only uses peerDependencies so don't hesitate to use the library for the rest of your app.

<https://github.com/mbret/reactjrx> is specifically very useful if you use `rxjs`.

```typescript
import { ReactReader } from "@prose-reader/react-reader"
// Don't forget to import the package css
import "@prose-reader/react-reader/index.css"

const MyAppReader = () => {
  // You own the creation of your reader instance
  const readerInstance = useReaderInstance()
  
  // Then we handle the rendering
  return (
    <ReactReader
      reader={readerInstance}
    />
  )
}
```

## Prose settings vs Reader settings

Some settings are managed by the reader (eg: font size), as a result you should not specify them during the creation of your prose instance or they will be overwritten. Check the properties from the reader component to see what is available. Usually when the reader can change a setting of prose or its enhancers its setting should be managed through it. This is to avoid having multiple source of truth.

## Toggling features

By default, the reader will use the bare core reader. If you want to unlock more features you can enhance your reader with automatically supported enhancers.

For example adding the enhancer [#search](#search "mention") will unlock this menu:

<figure><img src="/files/TVFT6dVbAk9XBm39ftIn" alt=""><figcaption></figcaption></figure>

```typescript
import { searchEnhancer } from "@prose-reader/enhancer-search"
import { createReader } from "@prose-reader/core"

export const createAppReader = searchEnhancer(createReader)
```

{% hint style="warning" %}
We are detecting certain markers in the enhancers to verify whether they exist and are valid. This is assuming you don't fiddle with them. The general rule of enhancers is to allow augmentation but not alteration.
{% endhint %}

### Search

See [Search](/enhancers/search.md) to install enhancer

### Bookmarks

See [Annotations](/enhancers/annotations.md) to install enhancer

* Bookmarking a page is done by tapping the top right corner of the page.

### Annotations

See [Annotations](/enhancers/annotations.md) to install enhancer

### Audio / Audiobooks

See [Audio](/enhancers/audio.md) to install enhancer

### Gallery

<div align="center"><figure><img src="/files/GbyvExPzMKMzen2SawcH" alt="" width="188"><figcaption></figcaption></figure> <figure><img src="/files/7ZRtdplOetzXPrs6iqis" alt="" width="188"><figcaption></figcaption></figure></div>

See [Gallery](/enhancers/gallery.md)to install enhancer

### Refit

See [Refit](/enhancers/refit.md)to install enhancer


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.prose-reader.com/react-reader/getting-started.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.