https://github.com/flogy/react-directus-html

React component to style and render HTML code received from Directus.
https://github.com/flogy/react-directus-html

Last synced: 12 days ago
JSON representation

React component to style and render HTML code received from Directus.

• Host: GitHub
• URL: https://github.com/flogy/react-directus-html
• Owner: flogy
• Created: 2018-03-21T18:53:46.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2019-10-18T12:56:56.000Z (over 6 years ago)
• Last Synced: 2025-12-28T06:48:01.027Z (5 months ago)
• Language: JavaScript
• Homepage:
• Size: 188 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-directus-html

> React component to style and render HTML code received from Directus.

[![NPM](https://img.shields.io/npm/v/react-directus-html.svg)](https://www.npmjs.com/package/react-directus-html) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

The goal of this component is to be able to style and render the returned HTML code from the [Directus CMS](https://getdirectus.com/) with ease.

## Install

```bash

npm install --save react-directus-html

```

## Usage

### Example

```jsx

import React, { Component } from 'react'

import { StyleSheet } from 'aphrodite'

import DirectusHtml from 'react-directus-html'

class Example extends Component {

  render () {

    return (

      

        {'
HTML that is not really from Directus
'}

      

    )

  }

}


const styles = StyleSheet.create({

  container: {

    backgroundColor: 'black'

  }

})

const elementStyles = StyleSheet.create({

  h2: {

    color: 'yellow'

  }

})

```

### Styling

Using the prop ``containerStyle`` you can pass an aphrodite style used to define the styling of the ``div`` containing the rendered HTML elements.

Using the prop ``elementStyles`` you can pass an aphrodite style sheet containing all the styles for each HTML element. The key must be equal to the HTML element tag name, e.g. ``h2`` or ``div``. The contained styles will then be applied to the realted HTML elements.

### Directus URL

The prop ``directusUrl`` is required to replace the relative URLs returned by Directus (e.g. for the image sources) with absolute ones. It must be formatted like this example URL: http://localhost:8080

## License

MIT © [Florian Gyger](https://github.com/flogy)