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: 3 months 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 (about 7 years ago)
• Default Branch: master
• Last Pushed: 2024-04-15T04:42:54.000Z (9 months ago)
• Last Synced: 2024-05-01T19:36:52.599Z (8 months 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

        
[![Build Status](https://travis-ci.org/nafg/scalajs-facades.svg?branch=master)](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.