Skip to content

chandu0101/scalajs-react-components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

56864d3 · Jun 5, 2018
Mar 17, 2018
Mar 18, 2018
Sep 4, 2017
Sep 4, 2017
Jun 5, 2018
Mar 17, 2018
Mar 18, 2018
Sep 4, 2017
Sep 4, 2017
Mar 17, 2018
Nov 30, 2014
Sep 4, 2017
Mar 18, 2018
Jun 5, 2018

Repository files navigation

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