Skip to content

Topic/react 0.14 #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jan 25, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 6 additions & 68 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,79 +1,17 @@
purescript-react
================
# purescript-react

[![Maintainer: paf31](https://img.shields.io/badge/maintainer-paf31-lightgrey.svg)](http://github.com/paf31) ![React: 0.13.3](https://img.shields.io/badge/react-0.13.3-lightgrey.svg)
[![Maintainer: paf31](https://img.shields.io/badge/maintainer-paf31-lightgrey.svg)](http://github.com/paf31) ![React: 0.14](https://img.shields.io/badge/react-0.14-lightgrey.svg)

Low-level React Bindings for PureScript.

For a more high-level set of bindings, you might like to look at `purescript-thermite`.

- [Module Documentation](docs/)

## Dynamic children

There are two ways that child elements can be passed to components:
- The first way is to spread the child element array when passing them to React's `createElement` function. The [React.DOM](docs/React/DOM.md) and [React.DOM.SVG](docs/React/DOM/SVG.md) spread the child element array.
- The second way is to pass the child element array to `createElement` without spreading. This is useful when dealing with [dynamic children](https://facebook.github.io/react/docs/multiple-components.html#dynamic-children). In this case a `key` property should be assigned direclty to each child. The [React.DOM.Dynamic](docs/React/DOM/Dynamic.md) and [React.DOM.SVG.Dynamic](docs/React/DOM/SVG/Dynamic.md) pass the child element array without spreading.

Note that this module provides functions `createElement` and `createElementDynamic` to handle the two cases above for component classes.

## Building

The library and example can be built with Pulp as follows:

pulp dep update
pulp build

pulp test -r cat > example/index.js
open example/index.html
```
bower install purescript-react
```

## Example

```purescript
module Main where

import Prelude

import Control.Monad.Eff

import Data.Maybe.Unsafe (fromJust)
import Data.Nullable (toMaybe)

import DOM (DOM())
import DOM.HTML (window)
import DOM.HTML.Document (body)
import DOM.HTML.Types (htmlElementToElement)
import DOM.HTML.Window (document)

import DOM.Node.Types (Element())

import React

import qualified React.DOM as D
import qualified React.DOM.Props as P

incrementCounter ctx e = do
val <- readState ctx
writeState ctx (val + 1)

counter = createClass $ spec 0 \ctx -> do
val <- readState ctx
return $ D.p [ P.className "Counter"
, P.onClick (incrementCounter ctx)
]
[ D.text (show val)
, D.text " Click me to increment!"
]

main = container >>= render ui
where
ui :: ReactElement
ui = D.div [] [ createFactory counter {} ]

container :: forall eff. Eff (dom :: DOM | eff) Element
container = do
win <- window
doc <- document win
elm <- fromJust <$> toMaybe <$> body doc
return $ htmlElementToElement elm
```
Please refer to [purescript-react-example](https://github.com/purescript-contrib/purescript-react)
18 changes: 6 additions & 12 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,29 +1,23 @@
{
"name": "purescript-react",
"version": "0.0.5",
"homepage": "https://github.com/purescript-contrib/purescript-react",
"description": "Purescript bindings for React.js",
"description": "PureScript bindings for react",
"main": "",
"keywords": [
"purescript",
"react"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
"*",
"!src/**/*"
],
"repository": {
"type": "git",
"url": "git://github.com/purescript-contrib/purescript-react.git"
},
"dependencies": {
"purescript-dom": "~0.2.6"
},
"devDependencies": {
"purescript-console": "~0.1.1",
"react": "~0.13.3"
"purescript-eff": "~0.1.2",
"purescript-unsafe-coerce": "~0.1.0"
}
}
32 changes: 16 additions & 16 deletions docs/React.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,14 @@ data ReactElement :: *

A virtual DOM node, or component.

#### `ReactComponent`

``` purescript
data ReactComponent :: *
```

A mounted react component

#### `ReactThis`

``` purescript
Expand Down Expand Up @@ -302,6 +310,14 @@ createClass :: forall props state eff. ReactSpec props state eff -> ReactClass p

Create a React class from a specification.

#### `createClassStateless`

``` purescript
createClassStateless :: forall props. (props -> ReactElement) -> ReactClass props
```

Create a stateless React class.

#### `handle`

``` purescript
Expand Down Expand Up @@ -350,20 +366,4 @@ createFactory :: forall props. ReactClass props -> props -> ReactElement

Create a factory from a React class.

#### `render`

``` purescript
render :: forall eff. ReactElement -> Element -> Eff (dom :: DOM | eff) ReactElement
```

Render a React element in a document element.

#### `renderToString`

``` purescript
renderToString :: ReactElement -> String
```

Render a React element as a string.


1 change: 0 additions & 1 deletion example/.gitignore

This file was deleted.

10 changes: 0 additions & 10 deletions example/index.html

This file was deleted.

7 changes: 7 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"name": "purescript-react",
"files": [],
"peerDependencies": {
"react": "^0.14.3"
}
}
Loading