permalinkComponent Syntax

Here are examples of increasingly complex components

permalinkComponent with neither props nor hooks

This is a component that will always render "Hello World" when you use it.

src/CoolComponent.purs
module CoolComponent where

import Prelude
import React.Basic.Hooks (component)
import React.Basic.DOM (text)

makeCoolComponent = component "CoolComponent" \props -> do
  pure (text "Hello World")

usageCoolComponent = do
  coolComponent <- makeCoolComponent
  pure $ coolComponent {}

This renders

Cool Component
Hello World

If we wanted this to be a <button>Hello World</button> instead we can do:

src/CoolComponent.purs
module CoolComponent where

import Prelude
import React.Basic.Hooks (component)
import React.Basic.DOM (text, button)

makeCoolComponent = component "CoolComponent" \props -> do
  pure (button { children: [ text "Hello World" ] })

usageCoolComponent = do
  coolComponent <- makeCoolComponent
  pure $ coolComponent {}
Cool Button Component

permalinkComponent with props but without hooks

This is a component that will display the text you tell it to.

src/SimpleComponentWithProps.purs
module SimpleComponentWithProps where

import Prelude
import React.Basic.Hooks (component)
import React.Basic.DOM (text, button)

makeCoolComponent = component "CoolComponent" \props -> do
  pure (button { children: [ text props.text ] })

usageCoolComponent = do
  coolComponent <- makeCoolComponent
  pure $ coolComponent { text: "LOVE" }

This renders

Cool Component With Props

permalinkComponent without props but with hooks

This is a component that has some state