Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/AlbertLucianto/vue-text-highlight

Text highlighter library for Vue.js :lipstick:
https://github.com/AlbertLucianto/vue-text-highlight

highlight text-highlighter vue

Last synced: about 2 months ago
JSON representation

Text highlighter library for Vue.js :lipstick:

Lists

README 

        
Vue Text Highlight





Coverage Status

Build Status

Downloads

Downloads

Version

License




## See working example [here](https://albertlucianto.github.io/vue-text-highlight).



## Installation



```bash

npm install --save vue-text-highlight

# or

yarn add vue-text-highlight

```



## Usage



### Basic Usage



```javascript

import Vue from 'vue';

import TextHighlight from 'vue-text-highlight';



Vue.component('text-highlight', TextHighlight);



// new Vue ...

```



#### SomeComponent.vue



```html



  {{ description }}



```



```javascript

data() {

  return {

    queries: ['birds', 'scatt'],

    description: 'Tropical birds scattered as Drake veered the Jeep'

  };

}

```



#### Output



text-highlight



### More Options



All available props in `TextHighlight` component are:



* __`queries:`__ `Array|String|RegExp`



  This prop accepts string, regex, and array of strings or regex. If array is given, it will highlight the union of matched strings/regex globally.



* __`[caseSensitive]:`__ `Boolean`



  Whether string being searched is case sensitive.



* __`[diacriticsSensitive]:`__ `Boolean`



  Whether string being searched is diacritics sensitive.



* __`[wholeWordMatch]:`__ `Boolean`



  Whether string being searched as a whole word .



* __`[highlightStyle]:`__ `Object|Array|String`



  Styles to be applied to highlighted ``. Similar to style bindings in vue, it accepts `Array` syntax, `Object` syntax, or plain styling as `String`. This prop will then be merged with default highlight styles in `TextHighlight` component. [See style binding in Vue.js.](https://vuejs.org/v2/guide/class-and-style#Binding-Inline-Styles)



* __`[highlightClass]:`__ `Object|Array|String`



  Classes to be added to highlighted ``. Similar to class bindings in vue, it accepts `Array` syntax, `Object` syntax, or class as `String`. [See class binding in Vue.js.](https://vuejs.org/v2/guide/class-and-style#Binding-HTML-Classes)



* __`[highlightComponent]:`__ `Object|String`



  By default vue-text-highlight uses `` for the highlighting. Pass this props to override with other tag (`string`) or custom component (Vue component definition).



  This component will be passed with two props from `text-highlight`:



  * __`index:`__ `Number`



    Index of highlighted component.



  * __`text:`__ `String`



    Highlighted words, equals to `this.$slots.default[0].text`



  For more details, see [example below](#advanced-usage).



* Other props and listeners that are not listed above are forwarded to the highlighted component. These props will be merged with higher precendence than `index` and `text` passed from `text-highlight`.



### Advanced Usage



There might be a case where you want to do more things with the highlighted words. For that reason, vue-text-highlight supports custom component for the highlighted words. In this case, the following example alerts on click.



#### OtherComponent.vue



```html



  

    {{ description }}

  



```



```js

import MyClickableComponent from 'MyClickableComponent';

```



```js

data() {

  return {

    queries: ['birds', 'scatt'],

    description: 'Tropical birds scattered as Drake veered the Jeep'

    MyClickableComponent,

    foo: 'bar',

  };

},

methods: {

  alert() {},

}

```



#### MyClickableComponent.vue



```html



  

    

  



```



```js

props: {

  baz: String, // From OtherComponent.vue

  index: Number, // From TextHighlight

  text: String, // From TextHighlight, equals to `this.$slots.default[0].text`

}

```



## Changelog



Changes are tracked in the [changelog](CHANGELOG.md).



## License



vue-text-highlight is available under the MIT License.