purescript-react-basic

This package implements an opinionated set of bindings to the React library, optimizing for the most basic use cases.

Features

• All React DOM elements and attributes are supported (soon, events are a work in progress).
• An intuitive API for specifying props - no arrays of key value pairs, just records.
• Attributes are optional, but type-checked. It is a type error to specify href as an integer, for example.

Getting Started

You can install this package using Bower:

bower install git@github.com:lumihq/purescript-react-basic.git

Here is an example component which renders a label read from props along with a counter:

module Counter where

import Prelude

import React.Basic as React
import React.Basic.DOM as R
import React.Basic.Events as Events

-- The props for the component
type Props =
  { label :: String
  }

-- Create a component by passing a record to the `react` function.
-- The `render` function takes the props and current state, as well as a
-- state update callback, and produces a document.
component :: React.Component Props
component = React.component { displayName: "Counter", initialState, receiveProps, render }
  where
    initialState =
      { counter: 0
      }

    receiveProps _ =
      pure unit

    render { props, state, setState } =
      R.button
        { onClick: Events.handler_ do
            setState \s -> s { counter = s.counter + 1 }
        , children: [ R.text (props.label <> ": " <> show state.counter) ]
        }

This component can be used directly from JavaScript. For example, if you are using purs-loader:

import {example as Example} from 'React.Basic.Example.purs';

const myComponent = () => (
  <Example label='Increment' />
);