F# Fable and bootstrap modals

Question

How can I create modal in Fable, it should work as normal Bootstrap modal.

div[Id "userOverview"; ClassName "modal fade"; Role "dialog"; TabIndex -1.; AriaLabelleddBy "userOverviewTile"][
  div[ClassName "model-dialog"; Role "document"][
    div[ClassName "model-content"][
      div[ClassName "modal-header"][
        button[ClassName "close"; DataDismiss "modal"; AriaLabel "Close"][
          span[AriaHidden "true"][!! "$times;"]
        ]
        h4[ClassName "modal-title"; Id "userOverviewTitle"][!! "User Overview"]
      ]
      div[ClassName "modal-body"][
        table[ClassName "table table-striped table-bordered table-hover table-responsive"][
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
        ]
      ]
      div[ClassName "modal-footer"][
        button[Type "button"; ClassName "btn btn-default btn-lg"; DataDismiss "modal"][!! "Close"]
      ]
    ]
  ]
]

In this example i get the following errors

error FSHARP: The value or constructor 'AriaLabelleddBy' is not defined  
error FSHARP: The value or constructor 'DataDismiss' is not defined
error FSHARP: The value or constructor 'AriaLabel' is not defined
error FSHARP: The value or constructor 'AriaHidden' is not defined

Is there another way?

Answer 1

The issue is that these attributes are not defined by default on React.Props.HTMLAttr however you can extend the interface by implementing the following in your project.

 type HTMLAttr = 
     | [<CompiledName("data-dismiss")>] DataDismiss of string
     | [<CompiledName("aria-label")>] AriaLabel of string
     interface IHTMLProp 

Obviously you can extend this union to suit your needs.