Reusable scalajs-react components
Clone or download
Pull request Compare This branch is 97 commits ahead of chandu0101:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
doc
generator-semantic-ui-react/src/main/scala/com/dbrsn/generator/sui
generator/src
macros/src
project
react-sortable-hoc/src
react-trello/src
semantic-ui-react/src
.gitignore
.scalafmt.conf
.travis.yml
LICENSE
README.md
build.sbt
scalastyle-config.xml
version.sbt

README.md

scalajs-react-components

Build Status License scalajs-react react

Reusable scalajs-react components.

This project was initially a clone of chandu0101/scalajs-react-components project, but with updated version of japgolly/scalajs-react library. But during the upgrade it was discovered that some of the components cannot be migrated to the latest version of React. Therefore the author took a decision to extract some of the components into separate projcet to simplify the update.

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! :)

Semantic UI

Maven Central react

Module semantic-ui-react contains scalajs wrapper for semantic-ui-react component.

Add dependencies in build.sbt:

libraryDependencies ++= Seq(
  "com.dbrsn.scalajs.react.components" %%% "semantic-ui-react" % "0.0.8"
)
npmDependencies in Compile ++= Seq(
  "semantic-ui-react" -> "0.83.0",
  "react" -> "16.6.1",
  "react-dom" -> "16.6.1"
)

Example of usage:

SuiButton(animated = true, onClick = (_: ReactMouseEventFromHtml) => Callback(???))(
  SuiButtonContent(visible = true)("Hello, World!"),
  SuiButtonContent(hidden = true)(SuiIcon(name = SuiIconType("arrow right"))())
)

React Sortable (HOC)

Maven Central react

Module react-sortable-hoc contains scalajs wrapper for react-sortable-hoc component.

Add dependencies in build.sbt:

libraryDependencies ++= Seq(
  "com.dbrsn.scalajs.react.components" %%% "react-sortable-hoc" % "0.0.8"
)
npmDependencies in Compile ++= Seq(
  "react-sortable-hoc" -> "0.8.3",
  "react" -> "16.6.1",
  "react-dom" -> "16.6.1"
)

Example of usage:

case class Model(text: String)
case class Props(model: Model)

val item1 = "Test 1"
val item2 = "Test 2"

SortableList[Model, Props].Props(
  listToDisplay = List(Model(item1), Model(item2)),
  sortableContainerProps = SortableContainer.Props(),
  externalProps = Props,
  itemComponent = raw
).render

react-trello

Maven Central react

Module react-trello contains scalajs wrapper for react-trello component.

Add dependencies in build.sbt:

libraryDependencies ++= Seq(
  "com.dbrsn.scalajs.react.components" %%% "react-trello" % "0.0.8"
)
npmDependencies in Compile ++= Seq(
  "react-trello" -> "2.0.4",
  "@babel/runtime" -> "7.1.5",
  "react" -> "16.6.1",
  "react-dom" -> "16.6.1"
)

Example of usage:

val data: Data[js.Object] = Data(
  Lane(id = LaneId("REPEAT"), title = "Repeat", label = "1/1", style = laneStyle)(
    Card(id = CardId("Repeat1"), title = "Morning Jog", label = "30 mins", description = "Track using fitbit")
  ),
  Lane(id = LaneId("ARCHIVED"), title = "Archived", label = "1/1", style = laneStyle)(
    Card(id = CardId("Archived1"), title = "Go Trekking", label = "300 mins", description = "Completed 10km on cycle")
  )
)

def onDataChange(nextData: Data[js.Object]): Callback =
  Callback.log("data has changed") >> Callback.log(s"next data: $nextData")

Board(
  data = data,
  draggable = true,
  collapsibleLanes = true,
  onDataChange = onDataChange _
)()