codemettle / scalajs-react-components

Reusable scalajs-react components

scalajs-react-components

Reusable scalajs-react components.

We are trying to make the experience of using javascript components in scala.js as good as possible by adding typed wrappers.

Adding types to javascript is a lot of guesswork, and we're certain to have gotten them wrong some places. Bug reports and/or pull requests are very much welcome! :)

Wrappers for javascript components:

These components require you to provide javascript yourself.

• Material-ui 0.18.1
• Elemental-ui 0.6.1
• Semantic-ui 0.68.5
• Google maps (downloads js directly from google)
• React GeomIcon (react-geomicons: 2.1.10)
• React Infinite (react-infinite, 0.11.0)
• Spinner (react-spinner, 0.2.7)
• React Select (react-select: 1.0.0-rc.5)
• React TagsInput (react-tagsinput, 3.16.1)
• React Slick (react-slick: 0.14.11)

Components written in scala.js

• DefaultSelect
• Pager
• ReactDraggable
• ReactListView
• ReactPopOver
• ReactSearchBox
• ReactTable
• ReactTreeView

Gotchas

You have to call apply even when components dont have children:

MuiRaisedButton(label = "label")()

Setup

SBT

Add these dependencies to you sbt build file

libraryDependencies ++= Seq(
  "com.github.japgolly.scalajs-react" %%% "core" % "1.1.0",
  "com.github.japgolly.scalajs-react" %%% "extra" % "1.1.0",
  "com.olvind" %%% "scalajs-react-components" % "1.0.0-M2"
)

This repository includes an example project, by all means use it as a template for your own.

ScalaCSS

In order to use the scala.js components, you need to make sure you load their CSS:

GlobalRegistry.register(<component>.Style)

See here for more details

Full Demo With Code Examples

Online :

http://chandu0101.github.io/scalajs-react-components

Local : This will start a web server on http://localhost:8080

sbt 
fastOptJS::webpack
demo/compile:fastOptJS::startWebpackDevServer

Example project

We've included an example project to give you an idea how to use the components