toddler.core
conj-prop-classes
(conj-prop-classes props)(conj-prop-classes classes {:keys [class className]})Utility function that will create vector from class and className props
Return vector of strings
fetch
(fetch url)Function will fetch content from URL and return string representation
get-mouse-position
(get-mouse-position)Returns current mouse position.
make-idle-service
(make-idle-service period f)Creates idle service that will return idle-channel. This channel can be used to async/put! values in channel.
Service accepts period and function. When idle-channel hasn’t received any data for period of time, than input function is called on last recevied value.
ml
(ml & lines)Multiline function. Joins input lines
mlf
macro
(mlf & line-or-arg)Multiline format macro. This macro will take string and if it is followed by something other than string will assume that taken string is formated line and following are arguments.
Repeats until next string end of line-or-arg input
(let [variable "391092109"]
(mlf
"Hi from macro"
"with formated %s " variable
"text on number %d" 10292))
mlf
macro
(mlf & line-or-arg)Multiline format macro. This macro will take string and if it is followed by something other than string will assume that taken string is formated line and following are arguments.
Repeats until next string end of line-or-arg input
(let [variable "391092109"]
(mlf
"Hi from macro"
"with formated %s " variable
"text on number %d" 10292))
mouse-position
portal
Use when you wan’t to mount react component on some DOM element that can be found by locator function.
portal will try to locate element. If it is not found inside timeout period, portal will give up
random-string
(random-string)use-calendar
(use-calendar key)Hook will return values of current locale for key:
- :months
- :months/standalone
- :months/short
- :months.standalone/short
- :eras
- :era/names
- :months/narrow
- :weekdays
- :weekdays/standalone
- :weekdays/short
- :weekdays.standalone/short
- :weekdays/narrow
- :weekdays.standalone/narrow
- :quarters
- :quarters/short
- :ampms
- :weekends
- :weekdays/first
use-current-locale
(use-current-locale)use-delayed
(use-delayed state)(use-delayed state timeout)Function returns stable input state after timeout. Idle service is created that tracks input state and when this state is not changed after timeout, than return state is updated.
Update will trigger react component rendering same as use-state
use-dimensions
(use-dimensions)(use-dimensions node)(use-dimensions node sizing)Hook returns ref that should be attached to component and second result dimensions of bounding client rect
use-graphql-url
(use-graphql-url)Returns GraphQL endpoint URL
use-idle
(use-idle state callback)(use-idle state callback {:keys [timeout initialized?], :or {timeout 500, initialized? false}})Idle hook. Returns cached value and update fn. Input arguments are initial state, callback that should will be called on idle timeout.
use-layout
(use-layout)Returns value of application layout context
use-listener
(use-listener publisher topic handler)Generic listener hook. For given publisher and topic apply handler.
use-local-storage
(use-local-storage location)(use-local-storage location transform)For local storage usage. Hook will return local state and second argument is set-local! that will store/update values in local storage at ‘location’
Location can be string, keyword, symbol
use-locale
(use-locale)Returns theme context value
use-locale-change
(use-locale-change)Returns locale change function that will set theme state.
use-locale-state
(use-locale-state)(use-locale-state localstorage-key)(use-locale-state localstorage-key default)Hook will provide theme state and state setter similar to helix.hooks/use-state. Except this state will be stored in localStorage.
When value of theme changes, it will store that value to local storage and check if <html> attribute data-theme has the same value as theme state
use-mouse-position
(use-mouse-position)(use-mouse-position track?)Hook will return mouse position. If mouse position is changed it will change state and cause re-render!
use-mouse-tracker
(use-mouse-tracker)Hook will add mousemove event on js/window and store updates in toddler.core/mouse-position atom.
use-multi-dimensions
(use-multi-dimensions ks)Similar to use dimensions, only for tracking multiple elements. Input should be sequence of keys, i.e keywords, and output is vector of two elements. First element is map of key to React ref, and second is map of reference to element dimensions.
use-mutation
(use-mutation {:keys [mutation selection types alias args on-load on-error]})Hook will return function that will send GraphQL mutation to backend based on input params.
Returns async/chan
use-mutations
(use-mutations {:keys [mutations on-load on-error]})Wraps multiple mutation into single GraphQL query and returns function that will send mutation to backend based on input parameters
use-on-parent-resized
(use-on-parent-resized _ref handler)Hook will track parent of _ref and when it is resized it will call handler
use-parent
(use-parent _ref)Hook will return parent of _ref
use-publisher
(use-publisher topic-fn)(use-publisher topic-fn buffer-size)Generic publisher function. Provide topic fn and use-publisher will return publisher publish
Publisher is async channel that publishes messages, and publish is function that accepts single data argument.
This data is published over publisher.
publisher should be used with use-listener
use-queries
(use-queries queries)(use-queries queries {:keys [on-load on-error]})Hook will return function that when called will send queries to backend and return response in form of async channel.
For more info about how to write queries look at use-query
use-query
(use-query {query-name :query, selection :selection, alias :alias, args :args, :keys [on-load on-error]})Hook will return function that when called will send GraphQL query to backend and return response in form of async channel.
selection should be in lacinia compatible selection form. I.E.
{:name nil
:address nil
:relatives [{:selections {:name nil :address nil}
:args {:city "New York"}}]}
use-resize-observer
deprecated
(use-resize-observer node f)Hook returns ref that should be attached to component and second argument is handler that will be called when resize is observed with bounding client rect arguments
use-scroll-offset
(use-scroll-offset body)(use-scroll-offset body threshold)This hook is intended for infinite scroll. Threshold is how many pixels from bottom do you wan’t to change state.
Returns: [offset reset]
It will have internal cache that will track users maximal scroll and if in threshold area it will simply inc offset, thus enabling you to use-effect and track that offset to handle what should happen.
Reset is function that is called without arguments to reset offset counter.
use-session-cache
deprecated
(use-session-cache location value)(use-session-cache location transform value)(use-session-cache location transform value init-fn)Hook that will store variable value in browser session storage when ever value changes. If init-fn is provided it will be called on last recorded value for given variable that is found under location key in browser session storage.
Returns atom
use-session-storage
(use-session-storage location)(use-session-storage location transform)For session storage usage. Hook will return session storage state and second argument is set-local! that will store/update values in session storage at ‘location’
Location can be string, keyword, symbol
use-theme
(use-theme)Returns theme context value
use-theme-change
(use-theme-change)Returns theme change function that will set theme state.
use-theme-state
(use-theme-state)(use-theme-state localstorage-key)(use-theme-state localstorage-key default)Hook will provide theme state and state setter similar to helix.hooks/use-state. Except this state will be stored in localStorage.
When value of theme changes, it will store that value to local storage and check if <html> attribute data-theme has the same value as theme state
use-toddler-listener
(use-toddler-listener topic handler)Function will register handler for topic on global toddler toddler.app/signal-publisher
use-toddler-publisher
(use-toddler-publisher)Function will forward all input data to global toddler.app/signal-channel. Data will be published through toddler.app/signal-publisher.
See use-toddler-listener for handling published signals
use-token
(use-token)Returns current app token if any.
use-translate
(use-translate)Hook will return function that when called will based on toddler.app/locale context translate input value.
Supported translation values are number,Date,keyword and UUID
use-translatef
(use-translatef)Hook will return function that when called will based on toddler.app/locale context translate input value.
Supported translation values are number,Date,keyword and UUID
use-url
(use-url)Returns application root URL
use-user
(use-user)Returns value in app/user context
use-window-dimensions
(use-window-dimensions)Function will return browser window dimensions that should be instantiated in app/window context
use-window-height
(use-window-height)Returns visible window height size
use-window-width
(use-window-width)Returns visible window width size
use-window-width-test
(use-window-width-test pred size)Test window width with predicate. Should be used like
(use-window-width-test < 400)
to test if window width is less than 400px
wrap-locale
(wrap-locale component)(wrap-locale component key)(wrap-locale component key default)Function will wrap component with provided toddler.app/locale and toddler.app/change-locale context. Locale state will be stored in localstorage under toddler.core/locale key
wrap-theme
(wrap-theme component)(wrap-theme component key)(wrap-theme component key default)Function will wrap component with provided toddler.app/theme and toddler.app/change-theme context. Theme state will be stored in localstorage under toddler.core/theme key