reason-react

reason-react

  • Docs
  • Try
  • Examples
  • Community
  • Blog
  • Languages iconEnglish
    • 日本語
    • Español
    • Français
    • 한국어
    • Português (Brasil)
    • Русский
    • 中文
    • 繁體中文
    • Help Translate
  • GitHub

›Core

Getting Started

  • What & Why
  • Installation
  • Intro Example

Core

  • Components
  • JSX (Version 3)
  • Event
  • Style
  • Router
  • Working with DOM
  • Refs in React
  • ReasonReactCompat: migrating to 0.7.0 and JSX v3
  • Testing ReasonReact components

ReactJS Idioms Equivalents

  • Invalid Prop Name
  • Props Spread
  • Component as Prop
  • Ternary Shortcut
  • Context & Mixins
  • Custom Class/Component Property
  • Using Event Values With useState
  • Error boundaries

Record API (deprecated)

  • JSX (Old, Version 2)
  • Creation, Props & Self
  • Render
  • Callback Handlers
  • State, Actions & Reducer
  • Lifecycles
  • Instance Variables
  • React Ref
  • Talk to Existing ReactJS Code
  • cloneElement
  • Children
  • Subscriptions Helper
  • Router

FAQ

  • I'm Having a Type Error
  • Record Field send/handle Not Found
  • send/handle callbacks having Incompatible Types
  • I Really Need Feature X From ReactJS
  • Element Type is Invalid Runtime Error
  • I want to create a DOM element without JSX
Edit

Style

Since CSS-in-JS is all the rage right now, we'll recommend our official pick soon. In the meantime, for inline styles, there's the ReactDOM.Style.make API:

<div style=(
  ReactDOM.Style.make(~color="#444444", ~fontSize="68px", ())
)/>

It's a labeled (typed!) function call that maps to the familiar style object {color: '#444444', fontSize: '68px'}. Note that make returns an opaque ReactDOM.style type that you can't read into. We also expose a ReactDOM.Style.combine that takes in two styles and combine them.

Escape Hatch: unsafeAddProp

The above Style.make API will safely type check every style field! However, we might have missed some more esoteric fields. If that's the case, the type system will tell you that the field you're trying to add doesn't exist. To remediate this, we're exposing a ReactDOM.Style.unsafeAddProp to dangerously add a field to a style:

let myStyle = ReactDOM.Style.make(~color="#444444", ~fontSize="68px", ());
let newStyle = ReactDOM.Style.unsafeAddProp(myStyle, "width", "10px");
← EventRouter →
  • Escape Hatch: unsafeAddProp