# react-native-draftjs-display

> ![CI](https://github.com/lukeramsden/react-native-draftjs-display/workflows/CI/badge.svg) [![CodeFactor](https://www.codefactor.io/repository/github/lukeramsden/react-native-draftjs-display/badge)](https://www.codefactor.io/repository/github/lukeramsden/r

Latest version **2.0.0** (published 2020-07-31) · SEE LICENSE IN LICENSE license · 0 weekly downloads

## Install

```sh
npm install react-native-draftjs-display
pnpm add react-native-draftjs-display
yarn add react-native-draftjs-display
bun add react-native-draftjs-display
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2020-07-31 |
| First published | 2020-06-01 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 20.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | lukeramsden |

## Links

- npm: https://www.npmjs.com/package/react-native-draftjs-display
- npm.io page: https://npm.io/package/react-native-draftjs-display

## Dependencies (6)

- [fp-ts](https://npm.io/package/fp-ts.md) ^2.6.2
- [ramda](https://npm.io/package/ramda.md) ^0.27.0
- [@types/ramda](https://npm.io/package/@types/ramda.md) ^0.27.6
- [@types/react](https://npm.io/package/@types/react.md) ^16.8.6
- [@types/draft-js](https://npm.io/package/@types/draft-js.md) ^0.10.40
- [@types/react-native](https://npm.io/package/@types/react-native.md) ^0.60.0

## Recent versions

- 2.0.0 (latest) — 2020-07-31
- 1.3.1 — 2020-07-31
- 1.3.0 — 2020-07-31
- 1.2.0 — 2020-07-10
- 1.1.0 — 2020-07-10
- 1.0.0 — 2020-06-01

## README

# react-native-draftjs-display

![CI](https://github.com/lukeramsden/react-native-draftjs-display/workflows/CI/badge.svg) [![CodeFactor](https://www.codefactor.io/repository/github/lukeramsden/react-native-draftjs-display/badge)](https://www.codefactor.io/repository/github/lukeramsden/react-native-draftjs-display)

React Native component to display Draft.js content.

Partly forked from [jdponomarev/react-native-draftjs-render](https://github.com/jdponomarev/react-native-draftjs-render), with the original code coming from [globocom/react-native-draftjs-render](https://github.com/globocom/react-native-draftjs-render). Re-written to use TypeScript, and to better fit in with my use-case.

It's quite barebones as I'm only adding functionality I need. Feel free to use this as an example for your own library, and I will review and accept any PRs.

## Usage

```tsx
// Directly from my own codebase
const TextBlockHandler = ({block}: {block: DraftContentBlock}) => (
  <DraftText block={block} TextComponent={Text} />
);
<>
  {data.getPost?.content && (
    <DraftDisplay
      contentState={JSON.parse(data.getPost.content)}
      blockHandlers={{
        atomic: ({block}) => <PostMediaBlock block={block} />, // blockHandlers are optional, I use this for images, audio and video clips
        'header-one': TextBlockHandler, // I should probably add a TextComponent prop to the context. TODO?
        'header-two': TextBlockHandler,
        'header-three': TextBlockHandler,
        'header-four': TextBlockHandler,
        'header-five': TextBlockHandler,
        'header-six': TextBlockHandler,
        paragraph: TextBlockHandler,
        unstyled: TextBlockHandler,
      }}
    />
  )}
</>
```

## Development

Clone this repository and install its dependencies:

```bash
git clone https://github.com/lukeramsden/react-native-draftjs-display
cd react-native-draftjs-display
yarn # or npm install, if you're so inclined
```

`yarn run build` builds the library to `dist`.

`yarn test` builds the library, then tests it.

## License

[ISC](LICENSE).

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