React.Basic: how to use unsupported attributes?

Help
#1

I’m trying to create a Bootstrap 4 navbar in my React.Basic application.

Unfortunately, this requires use of some attributes which are unsupported by React.Basic, e.g. data-toggle, etc., as shown in this extract from https://getbootstrap.com/docs/4.1/components/navbar/

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

My naive attempt doesn’t work, and simply omitting these attributes fails to give satisfactory menu behaviour. Here’s the extract from my PureScript component:

    , R.button
      { className: "navbar-toggler"
      , type: "button"
      --, dataToggle: "collapse"
      --, dataTarget: "#navbarSupportedContent"
      --, ariaControls: "navbarSupportedContent"
      --, ariaExpanded: "false"
      --, ariaLabel: "Toggle navigation"
      , children: [ R.span { className: "navbar-toggler-icon" } ]
      }

Is there some escape hatch in React.Basic for creating such components?

1 Like
#2

I think you should be able to do this with unsafeCreateDOMComponent:

element (unsafeCreateDOMComponent "button")
  { className: "navbar-toggler"
  , type: "button"
  , dataToggle: "collapse"
  ...
  }
1 Like
#3

Thanks! That did the trick, once I realised I also had to quote the hyphen-separated attribute names, because there’s no automatic mapping of camelCase to kebab-case for these unsupported attributes.

    , element (unsafeCreateDOMComponent "button")
      { className: "navbar-toggler"
      , type: "button"
      , "data-toggle": "collapse"
      , "data-target": "#navbarSupportedContent"
      , "aria-controls": "navbarSupportedContent"
      , "aria-expanded": "false"
      , "aria-label": "Toggle navigation"
      , children: [ R.span { className: "navbar-toggler-icon" } ]
      }
2 Likes
#4

This is also how you integrate webcomponents / custom elements in purescript.

(By using these terms, hopefully people searching for it, will find this thread :slight_smile: )

2 Likes