BENZIN
React Material library for content-display featuring context-aware Markdown rendering.
Getting started
Installation
You can easily add BENZIN to your project with npm
:
$ npm install react-benzin
BENZIN is designed to work in Material-UI environment, so it's best to use them together:
$ npm install @material-ui/core
Usage
One can use $variableName
syntax (with backticks around!) to access context.variableName
from within markdown.
Consider following markdown source.md:
# Hello, world!
- I can render markdown
- My name is `$name`
I can also display button below:
`$button`
We can render it using <Markdown>
component:
import React from 'react';
import ReactDOM from 'react-dom';
import { Markdown } from 'react-benzin';
import { Button } from '@material-ui/core';
import source from './source.md'; // This import resolves into file url
const name = 'John Doe';
const button = <Button variant="contained" color="primary">Click me</Button>;
ReactDOM.render(<Markdown url={source} context={{ name, button }}/>, document.getElementById('root'));
Development
Running live demo
To run a live example, clone a repo and execute following commands:
$ npm i
$ npm start
It's worth noticing that presence of React-App in this repo forces us to split some configurations. For example, we have 2 Typescript
configs: one for react-scripts
to run live-demo, and the other one to build distribution files.
Running tests
$ npm test
NOTE: this command assures that ESlint
does not throw any warnings and exits with a non-zero status code otherwise. That means CircleCI
tests would fail even if a single warning is present. Therefore, you should always locally test your changes before publishing them.
Building
We've decided to use Typescript compiler
to transpile our code, since we think Babel
is a bit of an overkill here.
$ npm run build
This command will generate dist/
folder ready for distribution, which you of course can explore. Note that tsc
creates type definitions (.d.ts
) for every corresponding .js
file. It's very useful because consumers also get access to them.
Deploying
Publishing to npm
is fully automated through CircleCI - package is deployed on every push into master
. Therefore only release PR's should be merged into master
branch.
Deploying to gh-pages
is automatically performed on every commit into develop
branch.