@shanedaugherty/react-content-block
A react component for rendering html strings.
Last updated 3 years ago by shanedaugherty .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @shanedaugherty/react-content-block 
SYNC missed versions from official npm registry.

React Content Block

A react component for rendering html strings.

Simple Usage

import ContentBlock from '@shanedaugherty/react-content-block';

render() {
  return <ContentBlock html={'<div>Any html</div>'} />
}

With Configuration Example

This library exports a higher-order component that can be used to bind props at runtime.

ContentBlock.jsx

import { withConfiguration } from '@shanedaugherty/react-content-block';
import { CustomImageComponent, SyntaxHighlighter, Section } from '../components';

export default withConfiguration({
  getProps: (tagname, attributes, instanceData) => {
     switch(tagname) {
       case img: 
         return { srcset: instanceData.imageSizes.map(...) }
     }
  },
  replacements: {
    img: (props) => <CustomImageComponent {...props} />,
    code: (props) => <SyntaxHighlighter {...props} />,
    section: (props) => <Section {...props} />
  }
})

Page.jsx

import ContentBlock from './ContentBlock.jsx';

class Page extends React.Component {
  static state = { 
    html: null, 
    media: null 
  };
  
  async componentDidMount() {
    const page = await api.getPage('home');
    const { html, media } = page;
    this.setState({ html, media });
  }
  
  render() {
    const {html, media} = this.state;
    if (!html) return null;
    return (<ContentBlock html={html} data={media} />)
  }  
}

Props

###replacements Replacements can be passed to use custom components in place of any html tag.

###getProps A function that can be used to provide props to a custom component.

###data Instance data to be passed to the third parameter of getProps.

###className A classname to be applied to the wrapper div, can only be used when useWrapper is set to true. type: string default: ContentBlock

###useWrapper When true the content will be wrapped in a div. type: boolean default: false

Current Tags

  • 2.3.8                                ...           latest (3 years ago)

22 Versions

  • 2.3.8                                ...           3 years ago
  • 2.3.7                                ...           3 years ago
  • 2.3.6                                ...           3 years ago
  • 2.3.5                                ...           3 years ago
  • 2.3.4                                ...           3 years ago
  • 2.3.3                                ...           3 years ago
  • 2.3.2                                ...           3 years ago
  • 2.3.1                                ...           3 years ago
  • 2.3.0                                ...           3 years ago
  • 2.2.8                                ...           3 years ago
  • 2.2.7                                ...           3 years ago
  • 2.2.6                                ...           3 years ago
  • 2.2.5                                ...           3 years ago
  • 2.2.4                                ...           3 years ago
  • 2.2.3                                ...           3 years ago
  • 2.2.2                                ...           3 years ago
  • 2.2.1                                ...           3 years ago
  • 2.2.0                                ...           3 years ago
  • 2.1.1                                ...           3 years ago
  • 2.1.0                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 0
Dependencies (4)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |