react-native-highlighter - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #go #android #rust #deep-learning #docker #macos #kubernetes #awesome-list #security #pytorch #ios #openai

react-native-highlighter

(★ 70)

A library for 🌈 highlighting specific contents and enabling interaction with them.

파일 탐색기

최종 버전 다운로드 (.zip)

- - ci.yml
- - adaptive-icon.png
  - favicon.png
  - icon.png
  - splash.png
- - App.tsx
- app.json
- App.tsx
- babel.config.js
- metro.config.js
- package.json
- tsconfig.json
- webpack.config.js
- yarn.lock
- bootstrap.js
- - regex.test.tsx
- Highlight.ts
- HighlightedText.tsx
- index.tsx
- regexes.ts
- utils.ts
.editorconfig
.gitattributes
.gitignore
.nvmrc
.watchmanconfig
.yarnrc
babel.config.js
CODE_OF_CONDUCT.md
CONTRIBUTING.md
lefthook.yml
LICENSE
package.json
README.md
tsconfig.build.json
tsconfig.json
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/farhoudshapouran/react-native-highlighter

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-native-highlighter

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install react-native-highlighter

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

yarn add react-native-highlighter

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![react-native-highlighter](https://user-images.githubusercontent.com/7857656/227882432-2d18c750-5c96-4838-8dfd-62bd44cfa18f.jpg)

# react-native-highlighter

A library for highlight what you want and interact with them

## Installation

```sh
npm install react-native-highlighter
```

OR

```sh
yarn add react-native-highlighter
```

## Basic Usage

```js
import HighlightedText, { Highlight } from 'react-native-highlighter';

export default function App() {
  const text = `React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces. You can use React Native today in your existing Android and iOS projects or you can create a whole new app from scratch.`;

const mainKeywords = new Highlight({
    keywords: ['react native', 'javascript'],
    style: { color: '#6C00FF', fontWeight: 'bold' },
  });

const extraMarkers = new Highlight({
    keywords: ['user interface', 'highlight'],
    style: { backgroundColor: '#F7DB6A' },
  });

return (
    <HighlightedText highlights={[mainKeywords, extraMarkers]}>
      {text}
    </HighlightedText>
  );
}
// ...
```

## Full Example

```js
import { StyleSheet, Linking } from 'react-native';
import HighlightedText, { Highlight } from 'react-native-highlighter';

export default function App() {
  const text = `React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.
Use a little—or a lot. You can use React Native today in your existing Android and iOS projects or you can create a whole new app from scratch.
For more please visit https://reactnative.dev or read latest posts from @reactnative.

#react #reactnative #javascript`;

const mainKeywords = new Highlight({
    keywords: ['react native', 'javascript'],
    style: { color: '#6C00FF', fontWeight: 'bold' },
    onPress: (keyword) => Alert.alert(keyword),
  });

const extraMarkers = new Highlight({
    keywords: ['user interface', 'highlight'],
    style: { backgroundColor: '#F7DB6A' },
    onPress: () => {},
  });

return (
    <HighlightedText
      highlights={[mainKeywords, extraMarkers]}
      caseSensitive={false}
      hashtags={true}
      hashtagStyle={styles.hashtagStyle}
      mentions={true}
      mentionStyle={styles.mentionStyle}
      onMentionPress={(mention) =>
        Linking.openURL(`https://twitter.com/${mention.replace('@', '')}`)
      }
      emails={true}
      emailStyle={styles.emailStyle}
      onEmailPress={(email) => Linking.openURL(`mailto:${email}`)}
      links={true}
      onLinkPress={(url) => Linking.openURL(url)}
    >
      {text}
    </HighlightedText>
  );
}

const styles = StyleSheet.create({
  hashtagStyle: { color: '#F54291' },
  mentionStyle: { color: '#379237', fontWeight: 'bold' },
  emailStyle: { color: '#FF6D28', fontWeight: 'bold' },
});
// ...
```

## Available props

| Name                     | Type            |   Default           | Description                                                                |
| ------------------------ | --------------- | ------------------- | ---------------------------------------------------------------------------|
| highlights               | `Highlight[]`   | `null`              | Array of Highlight object                                                  |
| caseSensitive            | `boolean`       | `false`             | Defines that uppercase and lowercase letters are treated as distinct       |    
| style                    | `TextStyle`     | `null`              | Defines the style of text |
| hashtags                 | `boolean`       | `false`             | Defines that all hashtags within the text are specified                    |
| hashtagStyle             | `TextStyle`     | `{ color: 'blue' }` | Defines the style of hashtags |
| onHashtagPress           | `func`          | `() => {}`          | Defines what action to take when pressing on the hashtags |
| mentions                 | `boolean`       | `false`             | Defines that all mentions within the text are specified |
| mentionStyle             | `TextStyle`     | `{ color: 'blue' }` | Defines the style of mentions |
| onMentionPress           | `func`          | `() => {}`          | Defines what action to take when pressing on the mentions |
| emails                   | `boolean`       | `false`             | Defines that all emails within the text are specified |
| emailStyle               | `TextStyle`     | `{ color: 'blue' }` | Defines the style of emails |
| onEmailPress             | `func`          | `() => {}`          | Defines what action to take when pressing on the emails |
| links                    | `boolean`       | `false`             | Defines that all links within the text are specified |
| linkStyle                | `TextStyle`     | `{ color: 'blue' }` | Defines the style of links |
| onLinkPress              | `func`          | `() => {}`          | Defines what action to take when pressing on the links |

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT