Skip to content

Latest commit

 

History

History
83 lines (62 loc) · 2.33 KB

README.md

File metadata and controls

83 lines (62 loc) · 2.33 KB
Raw

scalajs-react-components

Join the chat at https://gitter.im/chandu0101/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