https://github.com/asteriskzuo/react-native-ease-rich-text

https://github.com/asteriskzuo/react-native-ease-rich-text

Last synced: about 5 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/asteriskzuo/react-native-ease-rich-text
• Owner: AsteriskZuo
• License: mit
• Created: 2023-12-02T15:56:49.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2023-12-02T16:27:45.000Z (11 months ago)
• Last Synced: 2024-08-08T15:48:10.988Z (3 months ago)
• Language: TypeScript
• Size: 1.47 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# react-native-ease-rich-text

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

## Installation

```sh

npm install react-native-ease-rich-text

```

## Usage

1. How to use rich text display components.

```tsx

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

// ...

const ref = React.useRef({} as RichTextRef);

;

// ...

ref.current?.pushText('push text');

ref.current?.pushImage(require('../assets/1.png'), {

  width: 20,

  height: 20,

});

```

2. How to use rich text input components.

```tsx

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

// ...

const ref = React.useRef({} as RichInputRef);

;

// ...

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.

```tsx

// ...

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](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)