Fable.React.Autocomplete

A complete binding for react-autocomplete that is ready to use within Elmish applications

Installation

• Install this library from nuget

paket add Fable.React.Autocomplete --project /path/to/Project.fsproj

• Install the actual Autocomplete library from npm

npm install react-autocomplete --save

Documentation

There are two basic functions available: autocompleteBasic and autocomplete.

Use autocompleteBasic for the simplest experience, when all you need is to choose from a list of strings. You supply the list of strings, the current value and a dispatch function, as a record.

Use autocomplete for access to the complete API supplied by react-autocomplete. Here you supply a list of option values to configure the component. Use this version if your data is more complex than a list of strings, or you wish to tweak styling or event handling.

Live Demo with examples

Autocomplete.autocompleteBasic

Example

type State = { SelectedItem : string }

type Msg = UpdateSelectedItem of string 

let init() = { SelectedItem = "" }, Cmd.none

let update msg state = 
    match msg with 
    | UpdateSelectedItem item ->
        let nextState = { state with SelectedItem = item }
        nextState, Cmd.none

let render state dispatch = 
    AutoComplete.autocompleteBasic
        { Items =
                [ "99 Red Balloons"
                "Are You Gonna Be My Girl"
                "Are You Gonna Go My Way"
                "Dakota"
                "Thing Called Love"
                "The Lemon Song"
                "Black Dog"
                "Immigrant Song"
                "Whole Lotta Love"
                "Whole Lotta Rosie" ]
            Model = state.SelectedItem
            Dispatch = UpdateSelectedItem >> dispatch }

The argument to autocompleteBasic is a record of type BasicProps:

type BasicProps = {
    Items           : string list
    Model           : string
    Dispatch        : string -> unit
}

BasicProp	Description
Items	List of strings to be offered to user
Model	The current value of the selection
Dispatch	Function to call when user makes a selection. Also called while typing into input element

Autocomplete.autocomplete

Example

let render state dispatch = 
    AutoComplete.autocomplete [
        Items [|
            { Key = "0"; Label = "99 Red Balloons" }
            { Key = "1"; Label = "Are You Gonna Be My Girl" }
            { Key = "2"; Label = "Are You Gonna Go My Way" }
            { Key = "3"; Label = "Dakota" }
            { Key = "4"; Label = "Thing Called Love" }
            { Key = "5"; Label = "The Lemon Song" }
            { Key = "6"; Label = "Black Dog" }
            { Key = "7"; Label = "Immigrant Song" }
            { Key = "8"; Label = "Whole Lotta Love" }
            { Key = "9"; Label = "Whole Lotta Rosie" }
        |]
        Value state.SelectedItem
        RenderItem(fun item highlight ->
            div [ Prop.Key <| item.Key // Keep React happy.
                    Props.Style [ Background(if highlight then "gray" else "none") ] ] [
                str item.Label
            ])
        GetItemValue(fun item -> item.Label)
        OnSelect(UpdateSelectedItem >> dispatch)
        ShouldItemRender(fun item value -> item.Label.ToLower().Contains(value.ToLower()))
        OnChange(fun e v -> v |> UpdateSelectedItem |> dispatch)
        InputProps [ ClassName "input is-primary" ]
    ]

The argument to autocomplete is a list of AutoCompleteProps<'Item>. The generic type argument 'Item allows you to show an array of any record type.

type AutoCompleteProps<'Item> = 
  | GetItemValue of ('Item -> string)
  | Items of 'Item array
  | RenderItem of ('Item -> bool -> ReactElement)
  | AutoHighlight of bool
  | InputProps of HTMLAttr list
  | IsItemSelectable of ('Item -> bool)
  | MenuStyle of CSSProp list
  | OnChange of (Browser.Types.Event -> string -> unit)
  | OnMenuVisibilityChange of (bool -> unit)
  | OnSelect of (string -> unit)
  | Open of bool
  | RenderInput of (obj -> ReactElement)
  | RenderMenu of ('Item array -> string -> obj -> ReactElement)
  | SelectOnBlur of bool
  | ShouldItemRender of ('Item -> string -> bool)
  | SortItems of ('Item -> 'Item -> string -> int)
  | Value of string
  | WrapperProps of HTMLAttr list
  | WrapperStyle of CSSProp list

See original documentation for react-autocomplete for a detailed explanation of these configuration items. The following table discusses any F# aspects of their binding implementations.

AutoCompleteProps	Description
GetItemValue	Return the string value of the given item record
Items	Array of item records
RenderItem	Render item as a ReactElement. Second argument is true if item should be highlighted
AutoHighlight
InputProps	Properties for the element. List of HTMLAttr
IsItemSelectable
MenuStyle	Style properties for the menu. A list of CSSProp
OnChange
OnMenuVisibilityChange
OnSelect
Open
RenderInput
RenderMenu
SelectOnBlur
ShouldItemRender
SortItems	Compare function for Array.sort. string argument is current value
Value
WrapperProps	List of HTMLAttr
WrapperStyle	List of CSSProp

ofBasic

Use this to convert a BasicProps record into a list of AutoCompleteProps, to which you can append other AutoCompleteProps, such as MenuStyle, InputProps, WrapperProps, WrapperStyle.

For example

    AutoComplete.autocomplete <|
        InputProps [ ClassName "input is-primary" ] ::
        ofBasic { 
            Items = songs
            Model = state.SelectedItem
            Dispatch = UpdateSelectedItem >> dispatch 
        }

The definition of ofBasic is as follows

let ofBasic (basicProps : BasicProps) = // BasicProps -> AutoCompleteProps<string>
    let props = [
      Items (List.toArray basicProps.Items)
      RenderItem (fun item highlight -> 
        div [
                Prop.Key <| string item // Keep React happy.
                Props.Style [ Background (if highlight then "gray" else "none") ] 
            ] 
            [ str item  ]
      )
      GetItemValue id
      OnSelect basicProps.Dispatch
      ShouldItemRender (fun item value -> item.ToLower().Contains( value.ToLower() ))
      Value basicProps.Model
      OnChange (fun e v -> v |> basicProps.Dispatch)
    ]
    props

Issues

• react-autocomplete doesn't itself appear to be maintained
• Working around an issue in FunctionComponent that appears to lose F# metadata from properties passed through ReactJS (issue logged) - see makeList in Autocomplete.fs