https://github.com/zaid-ajaj/fable.react.flatpickr

Fable binding for react-flatpickr that is ready to use within Elmish applications
https://github.com/zaid-ajaj/fable.react.flatpickr

fable flatpak react

Last synced: 3 months ago
JSON representation

Fable binding for react-flatpickr that is ready to use within Elmish applications

• Host: GitHub
• URL: https://github.com/zaid-ajaj/fable.react.flatpickr
• Owner: Zaid-Ajaj
• License: mit
• Created: 2018-04-11T07:30:01.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-04-21T12:52:49.000Z (almost 6 years ago)
• Last Synced: 2024-10-12T13:25:37.552Z (3 months ago)
• Topics: fable, flatpak, react
• Language: F#
• Homepage: https://zaid-ajaj.github.io/Fable.React.Flatpickr/
• Size: 2.57 MB
• Stars: 14
• Watchers: 3
• Forks: 6
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Fable.React.Flatpickr [![Build Status](https://travis-ci.org/Zaid-Ajaj/Fable.React.Flatpickr.svg?branch=master)](https://travis-ci.org/Zaid-Ajaj/Fable.React.Flatpickr) [![Build status](https://ci.appveyor.com/api/projects/status/9ihe9vmw3k37u72r?svg=true)](https://ci.appveyor.com/project/Zaid-Ajaj/fable-react-flatpickr) [![Nuget](https://img.shields.io/nuget/v/Fable.React.Flatpickr.svg?maxAge=0&colorB=brightgreen)](https://www.nuget.org/packages/Fable.React.Flatpickr)

A complete binding for [react-flatpickr](https://github.com/coderhaoxin/react-flatpickr) that is ready to use within [Elmish](https://github.com/fable-elmish/elmish) applications

## Installation

- Install this library from nuget

```

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

```

- Install the actual Flatpickr library from npm

```

npm install flatpickr react-flatpickr --save

```

- You will also need css module loaders for Webpack because we are going to import the styles directly from npm `css-loader` and `style-loader`, install them :

```

npm install css-loader style-loader --save-dev

```

- Now from your Webpack, use the loaders:

```

{

    test: /\.(sa|c)ss$/,

    use: [

        "style-loader",

        "css-loader"

    ]

}

```

## Usage 

[Live Demo with examples](https://zaid-ajaj.github.io/Fable.React.Flatpickr/)

```fs

type State = { SelectedTime : DateTime }

type Msg = UpdateSelectedTime of DateTime 

let init() = { SelectedTime = DateTime.Now }, Cmd.none

let update msg state = 

    match msg with 

    | UpdateSelectedTime time ->

        let nextState = { state with SelectedTime = time }

        nextState, Cmd.none

let render state dispatch = 

    Flatpickr.flatpickr 

        [ Flatpickr.Value state.SelectedTime 

          Flatpickr.OnChange (UpdateSelectedTime >> dispatch)

          Flatpickr.ClassName "input" ]

// Somewhere before you app starts

// you must import the CSS theme

importAll "flatpickr/dist/themes/material_green.css"

// or any of the other themes in the dist directory of flatpickr

```