@asteriskzuo/react-native-ease-rich-text v0.1.0

react-native-ease-rich-text

Implement rich text components. Including input components and display components.

Installation

npm install react-native-ease-rich-text

Usage

1. How to use rich text display components.

import { multiply } from 'react-native-ease-rich-text';

// ...

const ref = React.useRef<RichTextRef>({} as RichTextRef);
<RichText propsRef={ref} />;

// ...

ref.current?.pushText('push text');
ref.current?.pushImage(require('../assets/1.png'), {
  width: 20,
  height: 20,
});

2. How to use rich text input components.

import { multiply } from 'react-native-ease-rich-text';

// ...

const ref = React.useRef<RichInputRef>({} as RichInputRef);
<RichInput
  propsRef={ref}
  containerStyle={{
    backgroundColor: '#8fbc8f',
    width: 300,
    minHeight: 40,
  }}
/>;

// ...

ref.current?.pushText('push text');
ref.current?.pushImage(
  {
    uri: 'https://cdn2.iconfinder.com/data/icons/chinese-new-year/512/gcds-dragon.png',
  },
  {
    width: 20,
    height: 20,
  }
);

3. How to pass text from input component to display component.

// ...
const list = inputRef.current?.getData();
displayRef.current?.pushData(list);

Remark

The current version is not perfect and only supports text and pictures. It will be updated in the future. If you like it or have the structure and ideas, you can help improve it together.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library