io.github.nafg.scalajs-facades:react-autocomplete_1_sjs1_3

Scala.js Facades

Simple Facade, a (macro-free) library for zero-boilerplate scalajs-react facades, plus (partial) facades for several react components built with it.

Installation

resolvers += Resolver.jcenterRepo
// Facade for @material-ui/core version 4.12.3
libraryDependencies += "io.github.nafg.scalajs-facades" %%% "material-ui-core_4" % "0.16.0"
// Facade for @material-ui/lab version 4.0.0-alpha.60
libraryDependencies += "io.github.nafg.scalajs-facades" %%% "material-ui-lab_4" % "0.16.0"
// Facade for react-autocomplete version 1.8.1
libraryDependencies += "io.github.nafg.scalajs-facades" %%% "react-autocomplete_1" % "0.16.0"
// Facade for react-datepicker version 4.6.0
libraryDependencies += "io.github.nafg.scalajs-facades" %%% "react-datepicker_4" % "0.16.0"
// Facade for react-input-mask version 2.0.4
libraryDependencies += "io.github.nafg.scalajs-facades" %%% "react-input-mask_2" % "0.16.0"
// Facade for react-phone-number-input version 3.1.44
libraryDependencies += "io.github.nafg.scalajs-facades" %%% "react-phone-number-input_3" % "0.16.0"
// Facade for react-select version 5.2.1
libraryDependencies += "io.github.nafg.scalajs-facades" %%% "react-select_5" % "0.16.0"
// Facade for react-waypoint version 10.1.0
libraryDependencies += "io.github.nafg.scalajs-facades" %%% "react-waypoint_10" % "0.16.0"
// Facade for react-widgets version 5.5.1
libraryDependencies += "io.github.nafg.scalajs-facades" %%% "react-widgets_5" % "0.16.0"
// Library for react component facades that are simple to write and simple to use
libraryDependencies += "io.github.nafg.scalajs-facades" %%% "simplefacade" % "0.16.0"

Simple Facade

A better way to define and use Scala.js facades for React components

Existing approaches suffer from some issues:

• Require dealing with low-level javascript interop types like js.UndefOr and union types
• Pass all props, necessitating everything to be optional (js.UndefOr, or Option, if you solve the first issue)
• Reliance on macros
• Tedious to define or to use

import io.github.nafg.simplefacade.Implicits.elementTypeWriter
import io.github.nafg.simplefacade.Implicits.vdomNodeWriter
import japgolly.scalajs.react.vdom.VdomNode
import scala.scalajs.js
import scala.scalajs.js.annotation.JSImport
import io.github.nafg.simplefacade.{FacadeModule, PropTypes}


object Badge extends FacadeModule.NodeChildren.Simple {
  @JSImport("@material-ui/core/Badge", JSImport.Default) @js.native object raw extends js.Object

  override def mkProps = new Props

  class Props extends PropTypes.WithChildren[VdomNode] {
    val anchorOrigin = of[js.Object]
    val badgeContent = of[VdomNode]
    val className = of[String]
    val classes = of[js.Object]
    val color = of[String]
    // more props
  }
}

// in some render method
Badge( _.badgeContent := "1", _.color := "secondary", _.dynamicProp(72))(
  Icon(_.children :=  "mail")
)

Facade code generation using react-docgen

Currently, the Material-UI facade is generated by extracting the components and props from react-docgen.