SAFE-Compatible UI Components
A set of SAFE-ready wrappers around existing React and JS UI Components.
How can I contribute my library to this list?
Required
- Adding a README with installation instructions
- Adding femto metadata to the projects
Nice to have
- Adding documentation with sample code on the various use cases
- Adding live documentation website with sample code
React bindings
Feliz (Recommended)
A fresh retake of the React API in Fable and a collection of high-quality components to build React applications in F#, optimized for happiness. Get it!
Fable.React
Fable bindings and helpers for React and React Native. Get it!
UI Frameworks
Feliz.Bulma
Bulma UI wrapper for amazing Feliz DSL. Get it!
Fulma
Fulma provides a wrapper around Bulma 0.9.0, an open source CSS framework, for fable-react. Get it!
Feliz.MaterialUI
Feliz-style Fable bindings for Material-UI. Get it!
Fable.Reactstrap
Fable binding for reactstrap. Get it!
Fable.MaterialUI
Fable bindings for Material-UI. Get it!
Fable.AntD
Fable bindings for Ant Design React components. Get it!
Fable.FontAwesome.Free
Bindings for the Free icons of Font Awesome, should be used with Fable.FontAwesome. Get it!
Fable.FluentUI
FluentUI (React) to Fable bindings. Get it!
Fable.ReactGridSystem
React Grid System to Fable bindings. Get it!
UI Controls
Feliz.Popover
Feliz-style Fable bindings for react-popover. Get it!
Feliz.SelectSearch
A binding for react-select-search that implements a searchable and customizable dropdown for Feliz applications. Get it!
Feliz.Kawaii
Feliz-style Fable bindings for react-kawaii which contains lovely SVG components. Get it!
Feliz.SweetAlert
Feliz-style Fable bindings for sweetalert2 and sweetalert2-react-content with Feliz style api for use within React applications. Implemented as both normal functions and Elmish commands, for maximum flexibility. Get it!
Elmish.SweetAlert
SweetAlert integration for Fable, made with love to work in Elmish apps. Get it!
Elmish.Toastr
Toastr integration with Fable, implemented as Elmish commands. Get it!
Elmish.AnimatedTree
A fork and binding of react-animated-tree, adapted to properly work within Elmish applications. Get it!
Feliz.ReactHamburger
Feliz-style Fable bindings for hamburger-react. Get it!
Feliz.ReactAwesomeSlider
Feliz-style Fable bindings for react-awesome-slider. Get it!
Feliz.ReactSelect
Feliz-style Fable bindings for react-select. Get it!
Fable.React.Flatpickr
Fable binding for react-flatpickr that is ready to use within Elmish applications. Get it!
Feliz.Tippy
Feliz-style Fable bindings for tippyjs-react. Get it!
Feliz.ReactSpeedometer
Feliz-style Fable bindings for react-d3-speedometer. Get it!
Fable.ReactKanban
React Kanban bindings for Fable React. Get it!
Fable.React.DrawingCanvas
This is a Fable React wrapper for canvas that allows you to declare a drawing. Get it!
Fable.GroupingPanel
An F# computation expression that groups Fable UI data into one or more collapsable panels. Get it!
Data Visualisation
Feliz.AgGrid
Feliz-style Fable bindings for ag-grid. Get it!
Fable.ReactAgGrid
Fable bindings for ag-grid. Get it!
Feliz.Reactflow
Feliz-style Fable bindings for react flow. Get it!
Maps
Fable.ReactGoogleMaps
Feliz-style Fable bindings for react-google-maps. Get it!
Feliz.PigeonMaps
Feliz-style bindings for pigeon-maps, React maps without external dependencies. This binding includes it's own custom PigeonMaps.marker component to build map markers manually. Get it!
Charting
Feliz.AgChart
Feliz-style bindings for ag-charts. Get it!
Feliz.Plotly
Fable bindings for plotly.js and react-plotly.js with Feliz style api for use within React applications. Lets you build visualizations in an easy, discoverable, and safe fashion. Get it!
Feliz.Recharts
Feliz-style bindings for recharts, a composable charting library built on React components. The binding translates the original API of recharts in a one-to-one fashion but makes it type-safe and easily discoverable. Get it!
Feliz.RoughViz
Feliz-style Fable bindings for roughViz visualisation library. It is a fun project when your data visualisations don't need to be formal. This binding is actually made to work with original rough-viz library than renders to the DOM rather than an existing third-party React library which makes it a nice example to learn from. Get it!
State management
Feliz.Recoil
Fable bindings in Feliz style for Facebook's experimental state management library recoil. Get it!
Testing
Fable.Jester
Fable bindings for jest and friends for delightful Fable testing. Get it!
Fable.Mocha
Fable library for testing. Inspired by the popular Expecto library for F# and adopts the testList, testCase and testCaseAsync primitives for defining tests. Get it!
Fable.ReactTestingLibrary
Fable bindings for react-testing-library and user-event. Get it!
Animation
Fun.ReactSpring
Fable bindings for react spring. Get it!