Lumi.Components

type LumiProps :: Row Type -> Typetype LumiProps props = { className :: String, css :: LumiTheme -> Style | props }

type PropsModifier :: Row Type -> Typetype PropsModifier props = PropsModifier' props props

type PropsModifier' :: Row Type -> Row Type -> Typetype PropsModifier' props props' = (LumiProps props -> LumiProps props) -> (LumiProps props' -> LumiProps props')

propsModifier :: forall props. (LumiProps props -> LumiProps props) -> PropsModifier props

Lift a props -> props function for composition with other PropsModifier functions.

type LumiComponent :: Row Type -> Typetype LumiComponent props = (LumiProps props -> LumiProps props) -> JSX

A LumiComponent takes a function that updates its default props instead of the plain record of props itself. This helps reduce the surface area for API updates:

React.Basic.element reactComponent
  { relevantProp, otherProp1: mempty, otherProp2: mempty, ...etc }

-- vs

lumiComponent _{ relevantProp = relevantProp }

lumiComponent :: forall hooks props. Lacks "children" props => Lacks "key" props => Lacks "ref" props => String -> Record props -> (LumiProps props -> Render Unit hooks JSX) -> Effect (LumiComponent props)

Create a LumiComponent from a name, set of defaults, and a render function. The render function behaves the same as in the hooks API.

lumiComponentFromHook :: forall hooks props r. Lacks "children" props => Lacks "key" props => Lacks "ref" props => String -> { render :: r -> JSX | props } -> (LumiProps (render :: r -> JSX | props) -> Hook hooks r) -> Effect (LumiComponent (render :: r -> JSX | props))

Create a LumiComponent from a react hook. This operation is useful for creating components that enhance a JSX tree with capabilities given by the Hook used.

withContent :: forall props content r. ((LumiProps (content :: content | props) -> LumiProps (content :: content | props)) -> r) -> content -> r

Operator alias for Lumi.Components.withContent (right-associative / precedence 0)

A convenient alias for setting the content property of a Lumi component if it exists.

unsafeMaybeToNullableAttr :: forall a. Maybe a -> a

WARNING: This is for JS interop -- don't use this to unwrap Maybes!

Unsafely nulls out a value so the resulting html attributes are less noisy Ex: R.input { type: unsafeMaybeToNullableAttr Nothing } avoids rendering the type attribute while still validating the type of the Maybe's content matches the type of the DOM field. It's only slightly safer than using unsafeCreateDOMComponent to avoid DOM type checking entirely.