Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/siposdani87/expo-rich-text-editor
This rich text editor is written in TypeScript and uses React Hooks structure. This component uses the HTML ContentEditable div feature and React communicate and send data to native JavaScript via WebView. It has basic text editing options.
https://github.com/siposdani87/expo-rich-text-editor
expo react-native rich-text-editor
Last synced: 7 days ago
JSON representation
This rich text editor is written in TypeScript and uses React Hooks structure. This component uses the HTML ContentEditable div feature and React communicate and send data to native JavaScript via WebView. It has basic text editing options.
- Host: GitHub
- URL: https://github.com/siposdani87/expo-rich-text-editor
- Owner: siposdani87
- License: mit
- Created: 2021-10-29T11:06:26.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-05-07T09:48:09.000Z (6 months ago)
- Last Synced: 2024-09-20T01:48:05.585Z (about 2 months ago)
- Topics: expo, react-native, rich-text-editor
- Language: TypeScript
- Homepage:
- Size: 2.72 MB
- Stars: 14
- Watchers: 2
- Forks: 4
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @siposdani87/expo-rich-text-editor
[](https://www.npmjs.com/package/@siposdani87/expo-rich-text-editor)
[](https://www.npmjs.com/package/@siposdani87/expo-rich-text-editor)
[](./LICENSE)
This rich text editor written in TypeScript and use React Hooks structure. This component use the HTML ContentEditable div feature and React communicate and send data to native JavaScript via WebView. It has base editing options.
## Getting Started
### Installing
```bash
npm install @siposdani87/expo-rich-text-editor
```
### Basic Usage
Check example directory for more samples and options.
```typescript
import { MaterialIcons } from '@expo/vector-icons';
import { RichTextEditor, RichTextViewer, ActionMap, ActionKey } from '@siposdani87/expo-rich-text-editor';
const htmlStr = '
Underline italic text bold word normal words
';
export const RichTextComponents = () => {
const [value, setValue] = useState('');
const getColor = (selected: boolean): string => {
return selected ? 'red' : 'black';
};
const getActionMap = (): ActionMap => {
return {
[ActionKey.bold]: ({ selected }) => (
),
};
};
const onValueChange = (v: string): void => {
console.log('onValueChange', v);
setValue(v);
};
return (
<>
>
);
};
const styles = StyleSheet.create({
text: {
// fontFamily: 'Inter_500Medium',
fontSize: 18,
},
link: {
color: 'green',
},
viewer: {
borderColor: 'green',
borderWidth: 1,
padding: 5,
},
editor: {
borderColor: 'blue',
borderWidth: 1,
padding: 5,
},
toolbar: {
borderColor: 'red',
borderWidth: 1,
},
});
```
## Props
### RichTextEditor
| Prop | Type | Description |
| --------------- | ----------------------- | ----------- |
| value * | string | HTML string with standard tags e.g.: p, b, strong, i, em, u, a, br |
| onValueChange * | (value: string) => void | Call this function on value changed |
| onFocus | () => void | Call this function on component focus |
| onBlur | () => void | Call this function on component blur |
| onClickLink | (href: string) => void | Call this function on link clicked |
| selectionColor | string | Color of text selection |
| actionMap | ActionMap | Action config for toolbar component |
| minHeight | number | Min height of container |
| textStyle | StyleProp | Style of base text |
| linkStyle | StyleProp | Style of link (a tag) |
| containerStyle | StyleProp | Style of content container |
| toolbarStyle | StyleProp | Style of toolbar container |
| disabled | boolean | Disable editing on component |
| autoFocus | boolean | Auto focus on component |
| debug | boolean | Print debug information to console |
### RichTextViewer
| Prop | Type | Description |
| --------------- | ----------------------- | ----------- |
| value * | string | HTML string with standard tags eg.: p, b, strong, i, em, u, a, ul, ol, li, br |
| onClickLink | (href: string) => void | Call this function on link clicked |
| textStyle | StyleProp | Style of base text |
| linkStyle | StyleProp | Style of link (a tag) |
| containerStyle | StyleProp | Style of content container |
| debug | boolean | Print debug information to console |
## Preview
## Bugs or Requests
If you encounter any problems feel free to open an [issue](https://github.com/siposdani87/expo-rich-text-editor/issues/new?template=bug_report.md). If you feel the library is missing a feature, please raise a [ticket](https://github.com/siposdani87/expo-rich-text-editor/issues/new?template=feature_request.md). Pull request are also welcome.
## Developer
[Dániel Sipos](https://siposdani87.com)
## Sponsors
This project is generously supported by [TrophyMap](https://trophymap.org), [I18Nature](https://i18nature.com), and several other amazing organizations.