# react-markdown-to-matrix

> converts markdown files of a standard format into an interactive matrix view

Latest version **1.1.5** (published 2021-05-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-markdown-to-matrix
pnpm add react-markdown-to-matrix
yarn add react-markdown-to-matrix
bun add react-markdown-to-matrix
```

## Health

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

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2021-05-26 |
| First published | 2020-08-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 846 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kip Price |
| Maintainers | kip_price |

## Links

- npm: https://www.npmjs.com/package/react-markdown-to-matrix
- Repository: https://github.com/kipprice/markdown-matrix
- npm.io page: https://npm.io/package/react-markdown-to-matrix

## Dependencies (7)

- [redux](https://npm.io/package/redux.md) ^4.0.5
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [react-redux](https://npm.io/package/react-redux.md) ^7.2.1
- [redux-thunk](https://npm.io/package/redux-thunk.md) ^2.3.0
- [@emotion/core](https://npm.io/package/@emotion/core.md) ^10.0.35
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^10.0.27
- [@toolkip/server](https://npm.io/package/@toolkip/server.md) ^2.4.0

## Recent versions

- 1.1.5 (latest) — 2021-05-26
- 1.1.4 — 2020-11-19
- 1.1.3 — 2020-10-15
- 1.1.2 — 2020-10-14
- 1.1.1 — 2020-10-08
- 1.1.0 — 2020-08-24
- 1.0.3 — 2020-08-23
- 1.0.2 — 2020-08-23
- 1.0.1 — 2020-08-23
- 0.0.5 — 2020-08-23
- 1.0.0 — 2020-08-23

## README

# React Markdown-To-Matrix

This library creates an embeddable React application that will transform a specified markdown file into a matrix form, with H2s being turned into rows and H3s turned into columns. This also looks for differences between items and optionally highlights those differences.

## Installation
Run `yarn add react-markdown-to-matrix` or `npm install react-markdown-matrix` to add to an existing React app.

You will then be able to use the `<MarkdownToMatrix>` component:

```jsx
import { MarkdownToMatrix } from 'react-markdown-to-matrix';

export const App: React.FC = () => {
    return(
        <MarkdownToMatrix 
            title='Markdown-To-Matrix'
            enabledOptions={['diff', 'filters', 'displayMode', 'upload']}
        />
    );
};
```

## Options
There are a variety of configuration options available within the MarkdownToMatrix component:

| Parameter         | Type              | Required?| Description                                                                |
| ---------         | ----              | ---------| -----------                                                                |
| `enabledOptions`  | string[]          | Required | The options to enable in the sidebar (see below)                           |
| `title`           | string            | Optional | The title to display in the sidebar                                        |
| `subtitle`        | string            | Optional | The subtitle to display in the sidebar                                     |
| `fileUrls`        | string[]          | Optional | If provided, the files to preload into the matrix view                     |
| `customTheme`     | Theme             | Optional | Style overrides for colors and fonts                                       |
| `defaultMode`     | 'matrix' | 'list' | Optional | What view mode to start with; defaults to 'matrix'                         |
| `renderHtml`      | boolean           | Optional | Set to true to render inline HTML within the loaded markdown               |
| `excludeHeaders`  | string[]          | Optional | Any H2s / H3s that shouldn't be parsed into headers can be specified here  |

### enabledOptions
There are four available options to enable or disable within the `enabledOptions` parameter.

- `'upload'`        : allows users to upload their own markdown files to this view
- `'filters'`       : allows users to hide rows or columns
- `'diff'`          : allows users to view a diff view of elements in the grid
- `'displayMode'`   : allows users to toggle between list and matrix view

If an empty string is provided, the sidebar is entirely hidden from the usesrs (which may be better for embedding). In this case,  a set of urls for `fileUrls` must be provided.

### customTheme

You can update a variety of aspects about how the app displays through the properties on the `customTheme` parameter. All fields are optional. All colors are expected to be specified as six-digit hex colors, including the `#` at the beginning.

| Theme Property    | Type          | Description                                           |
| --------------    | ----          | -----------                                           |
| `dark`            | HexColor      | The dark color to use for the foregrouund             |
| `light`           | HexColor      | The light color to use for the background             |
| `darkTheme`       | HexColor      | A complementary dark color; used for the sidebar      |
| `lightTheme`      | HexColor      | A complementary light color; used for hovers          |
| `bodyFont`        | FontFamily    | The font to use for all body text                     |
| `headerFont`      | FontFamily    | The font to use for all header text                   |
| `isDarkMode`      | boolean       | If true, reverses when light and dark colors are used |

## Source
The source for this library is avilable at [github.com/kipprice/markdown-matrix](http://github.com/kipprice/markdown-matrix). You can see a working version of this library at [kipprice.github.io/markdown-matrix](https://kipprice.github.io/markdown-matrix).

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