($ type & args)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}))
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}))
Create a new React element from a valid React type.
Example:
($ MyComponent
"child1"
($ "span"
{:style {:color "green"}}
"child2" ))
Create a new React element from a valid React type.
Example:
```
($ MyComponent
"child1"
($ "span"
{:style {:color "green"}}
"child2" ))
```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" ))
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" ))
```(<> & children)Creates a new React Fragment Element
Creates a new React Fragment Element
(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.
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 spec statics)Helper function for creating a class component. See defcomponent.
Helper function for creating a class component. See `defcomponent`.
(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.
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 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:
Example:
(defcomponent foo (constructor [this] (set! (.-state this) #js {:counter 0})))
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 sym & body)Defines a new custom hook function. Checks for invalid usage of other hooks in the body, and other helix features.
Defines a new custom hook function. Checks for invalid usage of other hooks in the body, and other helix features.
(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.
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- display-name & rest)Same as defnc, yielding a non-public def
Same as defnc, yielding a non-public def
(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.
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 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.
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 & 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:
Some feature flags only pertain to named components, i.e. Fast Refresh and
factory functions, and thus can not be used with fnc.
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`.React.Fragment. See helix.core/<> for macro version.
React.Fragment. See `helix.core/<>` for macro version.
(-type factory)Extracts the underlying type from the factory function.
Extracts the underlying type from the factory function.
(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.
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.
(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)
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! 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.
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.
(suspense {:keys [fallback]} & children)Creates a React Suspense boundary.
Creates a React Suspense boundary.
React.Suspense. See helix.core/suspense for macro version.
React.Suspense. See `helix.core/suspense` for macro version.
(type f)Geven a factory function created by helix.core/factory or cljs-factory,
returns the original component that the factory creates elements of.
Geven a factory function created by `helix.core/factory` or `cljs-factory`, returns the original component that the factory creates elements of.
cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |