helix.core — lilactown/helix 0.2.0

$ clj/s≠

($ type & args)

clj

Create a new React element from a valid React type.

Will try to statically convert props to a JS object.

To pass in dynamic props, use the special & or :& key in the props map to have the map merged in.

Simple example:

($ my-component "child1" ($ "span" {:style {:color "green"}} "child2" ))

Dynamic exmaple:

(let [dynamic-props {:foo "bar"}] ($ my-component {:static "prop" & dynamic-props}))

cljs

Create a new React element from a valid React type.

Example:

($ MyComponent
 "child1"
 ($ "span"
   {:style {:color "green"}}
   "child2" ))

$$ cljs deprecated

Dynamically create a new React element from a valid React type.

$ can typically be faster, because it will statically process the arguments at macro-time if possible.

Example:

($$ MyComponent
 "child1"
 ($$ "span"
   {:style {:color "green"}}
   "child2" ))

<> clj/s macro

(<> & children)

Creates a new React Fragment Element

cljs-factory cljs

(cljs-factory type)

Creates a factory function for a component defined via defnc, that when called returns an element with the props and children passed to the factory. Slightly more performant than factory when used with a helix component.

Use helix.core/type to extract the original component this was called with.

create-component cljs

(create-component spec statics)

Helper function for creating a class component. See defcomponent.

create-context cljs

React.createContext

create-element cljs

create-ref cljs

(create-ref)

(create-ref initial-value)

Like react/createRef, but the ref can be swapped, reset, and dereferenced like an atom.

Note: helix.core/create-ref is mostly used for class components. Function components typically rely on helix.hooks/use-ref instead.

defcomponent clj/s macro

(defcomponent display-name & spec)

Defines a React class component. Like class display-name extends React.Component { ... } in JS.

Methods are defined using (method-name [this ,,,] ,,,) syntax. Properties elide the arguments vector (property-name expr)

Static properties and methods can be added by annotating the method or property with metadata containing the :static keyword.

Some assumptions:

• To use setState, you must store the state as a JS obj
• The render method receives three arguments: this, a CLJS map of props, and the state object.
• displayName by default is the symbol passed in, but can be customized by manually adding it as a static property

Example:

(defcomponent foo (constructor [this] (set! (.-state this) #js {:counter 0})))

defhook clj/s macro

(defhook sym & body)

Defines a new custom hook function. Checks for invalid usage of other hooks in the body, and other helix features.

defnc clj/s macro

(defnc display-name & form-body)

Defines a new functional React component. Used like:

(defnc component-name
  "Optional docstring"
  {,,,fn-meta}
  [props ?ref]
  {,,,opts-map}
  ,,,body)

component-name will now be bound in the namespace a React function component that returns a React Element.

Your component should adhere to the following:

First parameter is 'props', a map of properties passed to the component.

Second parameter is optional and is used with React.forwardRef.

fn-meta is optional and will be merged into the metadata of the component-name symbol. A special :wrap key may contain an ordered sequence of higher-order components to wrap the component in.

opts-map is optional and can be used to pass some configuration options to the macro. Current options:

• :helix/features - a map of feature flags to enable. See "Experimental" docs.

body should return a React Element.

defnc- clj/s macro

(defnc- display-name & rest)

Same as defnc, yielding a non-public def

extract-cljs-props cljs

(extract-cljs-props o)

A helper function for turning a props object into a CLJS map. Works with both factory functions (which stores a map in a single key, "helix/props") and normal JS objects. Mostly used internally by helix, but can be useful when writing HOC.

factory cljs

(factory type)

Creates a factory function for a React component, that when called returns an element with the props and children passed to the factory.

Use helix.core/type to extract the original React component.

fnc clj/s macro

(fnc & body)

Creates a new anonymous function React component. Used like:

(fnc ?optional-component-name [props ?forwarded-ref] {,,,opts-map} ,,,body)

Returns a function that can be used just like a component defined with defnc, i.e. accepts a JS object as props and the body receives them as a map, can be used with $ macro, forwardRef, etc.

opts-map is optional and can be used to pass some configuration options. Current options:

• ':wrap' - ordered sequence of higher-order components to wrap the component in
• ':helix/features' - a map of feature flags to enable.

Some feature flags only pertain to named components, i.e. Fast Refresh and factory functions, and thus can not be used with fnc.

Fragment cljs

React.Fragment. See helix.core/<> for macro version.

get-react cljs

(get-react)

IExtractType cljs protocol

-type cljs

(-type factory)

Extracts the underlying type from the factory function.

jsx cljs

jsxs cljs

memo cljs

(memo component)

(memo component compare)

Like React.memo, but passes props to compare as CLJS map-likes instead of JS objects. compare should return true if props are equal, and false if not.

meta->form clj

provider clj/s macro

(provider {:keys [context value] :as props} & children)

Creates a Provider for a React Context value.

Example:

(def my-context (react/createContext))

(provider {:context my-context :value my-value} child1 child2 ...childN)

register! cljs

(register! type id)

Registers a component with the React Fresh runtime. type is the component function, and id is the unique ID assigned to it (e.g. component name) for cache invalidation.

signature! cljs

(signature!)

suspense clj/s macro

(suspense {:keys [fallback]} & children)

Creates a React Suspense boundary.

Suspense cljs

React.Suspense. See helix.core/suspense for macro version.

type cljs

(type f)

Geven a factory function created by helix.core/factory or cljs-factory, returns the original component that the factory creates elements of.