https://github.com/nafg/scalajs-facades
Facades for scalajs-react
https://github.com/nafg/scalajs-facades
react-select reactjs scala scalajs scalajs-react
Last synced: about 1 year ago
JSON representation
Facades for scalajs-react
- Host: GitHub
- URL: https://github.com/nafg/scalajs-facades
- Owner: nafg
- Created: 2017-11-17T04:56:30.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-15T04:42:54.000Z (about 2 years ago)
- Last Synced: 2024-05-01T19:36:52.599Z (about 2 years ago)
- Topics: react-select, reactjs, scala, scalajs, scalajs-react
- Language: Scala
- Homepage:
- Size: 484 KB
- Stars: 9
- Watchers: 3
- Forks: 4
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://travis-ci.org/nafg/scalajs-facades)
# 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
```scala
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:
1. Require dealing with low-level javascript interop types like js.UndefOr and union types
2. Pass all props, necessitating everything to be optional (js.UndefOr, or Option, if you solve the first issue)
3. Reliance on macros
4. Tedious to define or to use
```scala
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.