React Native render for draft.js model
JavaScript Makefile
Clone or download
Latest commit d64f0ab Jul 3, 2018

README.md

React Native Draft.js Render

Build Status Coverage Status npm version license

bitHound Overall Score bitHound Dependencies bitHound Code

A React Native render for Draft.js model.

Discussion and Support

Join the #react-native-render channel on DraftJS Slack team.

Documentation

Getting Started

Install React Native Draft.js Render on your React Native project, using NPM or Yarn:

yarn add react-native-draftjs-render
# or...
npm i -S react-native-draftjs-render

Using

Just import and insert your Draft.js model on getRNDraftJSBlocks:

import React from 'react';
import {
  ScrollView,
  AppRegistry,
} from 'react-native';

import getRNDraftJSBlocks from 'react-native-draftjs-render';
import contentState from 'DraftJs/contentState';

const MyApp = () => {
  const blocks = getRNDraftJSBlocks({ contentState });
  return (
    <ScrollView style={{ flex: 1 }}>{blocks}</ScrollView>
  );
};

AppRegistry.registerComponent('MyApp', () => MyApp);

See our sample folder for more details.

Adding custom styles

RNDraftJSRender comes with default styles, but you can use your own:

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
} from 'react-native';

import getRNDraftJSBlocks from 'react-native-draftjs-render';
import contentState from 'DraftJs/contentState';

const styles = StyleSheet.flatten({
  paragraph: {
    color: 'pink',
    fontSize: 18,
  },
  link: {
    color: 'blue',
    fontWeight: 'bold',
  },
});

const MyApp = () => {
  const blocks = getRNDraftJSBlocks({ contentState, customStyles: styles });
  return (
    <View style={{ flex: 1 }}>{blocks}</View>
  );
};

AppRegistry.registerComponent('MyApp', () => MyApp);

See more at Custom Styles documentation.

Contributing

To develop using example react-native project:

git clone git@github.com:globocom/react-native-draftjs-render.git
cd react-native-draftjs-render/
make setup

To run tests:

make test

To watch lib changes appearing on Sample App:

make watch

To run sample app in iOS:

make ios

To run sample app in Android:

make android