Quill component for React Native built using
postMessage communication and a WebView.
npm install react-native-webview-quill
to use you must set a webview provider once on your project
import {providerRegistry} from "react-native-webview-quill"
import {WebView} from 'react-native-webview-quill/src/providers/WebView/ReactNative/index';
providerRegistry.WebViewProvider = WebView
then you can use the Quill component:
import {Quill} from 'react-native-webview-quill';
All properties are optional.
| Property | Description |
|---|---|
onContentChange |
A callback receiving the quilljs contents as parameter, whenever the contents change. |
options |
A quilljs instance config, see their documentation. |
containerStyle |
The style property for the inner WebView component, see documentation. |
content |
The initial quilljs contents, useful for readonly/viewer component. |
Use this.quill.reloadResources(), to force component to update content.
componentDidUpdate(prevProps, prevState){
if (prevState.delta !== this.state.delta)
this.quill.reloadResources()
}
<Quill
ref={(quill) => { this.quill = quill }}
content={ this.state.delta } />
This example is typescript, though the library works with plain javascript as well.
//Generic Dependencies
import * as React from 'react';
import { StatusBar, View } from 'react-native';
// React native webview quill
import { DeltaStatic, providerRegistry, Quill } from 'react-native-webview-quill';
import { WebView } from 'react-native-webview-quill/src/providers/WebView/ReactNative/index';
// Only once: Set the webview implementation to use
// Should be done once, probably in your index.js
providerRegistry.WebViewProvider = WebView;
// This is a example of a QuillDelta object that describes the
// content and formatting of the richtext editor
// More information at https://quilljs.com/docs/delta/
const defaultOps: DeltaStatic = {
ops: [
{
insert: 'Test',
attributes: {
bold: true,
},
},
],
};
export default class App extends React.Component<{}, { content: DeltaStatic }> {
constructor(props: any) {
super(props);
this.state = {
content: defaultOps,
};
}
public render() {
//Render a full screen quill editor
return (
<View style={{ flex: 1 }}>
<View style={{ height: StatusBar.currentHeight }} />
<Quill
content={
/* the initial content */
this.state.content
}
onContentChange={
/* Callend when an edit is made */
this.onContentChange
}
containerStyle={
/*The style passed to the editor container*/
{ flex: 1 }
}
/>
</View>
);
}
private onContentChange = (content: DeltaStatic) => {
// Save this content
this.setState({ content });
};
}
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent