https://github.com/cmeeren/fable.import.autosuggesthighlight

Fable bindings for autosuggest-highlight
https://github.com/cmeeren/fable.import.autosuggesthighlight

fable fable-bindings

Last synced: about 1 month ago
JSON representation

Fable bindings for autosuggest-highlight

• Host: GitHub
• URL: https://github.com/cmeeren/fable.import.autosuggesthighlight
• Owner: cmeeren
• License: mit
• Created: 2019-01-12T19:45:26.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-01-06T07:08:16.000Z (about 5 years ago)
• Last Synced: 2024-12-14T11:19:17.557Z (about 1 month ago)
• Topics: fable, fable-bindings
• Language: F#
• Size: 43.9 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Fable.Import.AutosuggestHighlight

This package provides Fable bindings for [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight).

## Installation

* Install the `autosuggest-highlight` npm package:

  * using npm: `npm install autosuggest-highlight`

  * using yarn: `yarn add autosuggest-highlight`

* Install the bindings:

  * using dotnet: `dotnet add package Fable.Import.AutosuggestHighlight`

  * using paket: `paket add Fable.Import.AutosuggestHighlight`

## Example usage

The easiest way is to use the convenience function `getParts`:

```f#

getParts : (query: string) -> (text: string) -> (string * bool) list

```

This function returns consecutive parts of `text` with a boolean indicating whether the part should be highlighted. How you then use and render this data is entirely up to you.

You can also access the “native” autosuggest-highlight functions (`match` and `parse`) in the `Native` submodule.

The following is a basic example that assumes you have a CSS class called `highlighted` that takes care of styling highlighted parts of the text.

```f#

open Fable.Helpers.React

open Fable.Helpers.React.Props

open Fable.Import

let view =

  div [ ] [

    "Hello, world!"

    |> AutosuggestHighlight.getParts "wo"

    |> List.map (fun (s, hl) -> span [ if hl then yield Class "highlighted" ] [ str s ] )

    |> fragment []

  ]

```

Changelog

---------

#### 1.1.1 (2019-07-25)

- Added femto support

#### 1.1.0 (2019-05-02)

- Updated for Fable.Core 3. No API changes.

#### 1.0.0 (2019-01-12)

* Initial release

## Deployment checklist

1. Make necessary changes to the code

2. Update the changelog

3. Update the version and release notes in the package info

4. Update the supported npm dependency versions for femto in the fsproj

5. Commit and tag the commit (this is what triggers deployment from  AppVeyor). For consistency, the tag should ideally be in the format `v1.2.3`.

6. Push the changes and the tag to the repo. If AppVeyor build succeeds, the package is automatically published to NuGet.