(Slide {:keys [direction duration timeout unmount-on-exit mount-on-enter class
easing appear enter exit on-exit on-exited on-enter on-entered
classes id]
:or {timeout 500
on-entered (fn* [] ())
direction :left
appear false
exit true
on-enter (fn* [] ())
easing :ease-in-out-cubic
duration 500
mount-on-enter false
on-exit (fn* [] ())
enter true
on-exited (fn* [] ())
unmount-on-exit false}})
Slide components in and out based on mount status using react-transition-group
Properties
Slide takes a map of properties, many properties passed to the slide component are passed through to TransitionGroup (container) or Transition (child).
:direction
. Pred: #{:up :down :left :right}
. Default: :left
.
Which direction the component should be animated.
:duration
. Pred: pos-int?
. Default 500
. The duration used for the slide
animation in milliseconds.
:timeout
. Pred pos-int?
. Default 500
. The duration of the transition,
in milliseconds. This prop is passed to the Transition
component.
:unmount-on-exit
. Pred boolean?
. Default false
. By default the child
component stays mounted after it reaches the exited
state. Set this if you'd
prefer to unmount the component after it finishes exiting. This prop is passed
to the Transition
component.
:mount-on-enter
. Pred boolean?
. Default false
. By default the child
component is mounted immediately along with the parent Transition
component.
If you want to lazy mount
the component on the first (= :in true)
you can
set mount-on-enter. After the first enter transition the component will stay
mounted, even on exited
, unless you also specify unmount-on-exit. This prop
is passed to the Transition component.
:class
. Pred string?
. Default nil
. String classname to be applied to
the outer TransitionGroup
component.
:easing
. Pred #{:ease-in-quad :ease-in-cubic :ease-in-quart :ease-in-quint :ease-in-expo :ease-in-circ :ease-out-quad :ease-out-cubic :ease-out-quart :ease-out-quint :ease-out-expo :ease-out-circ :ease-in-out-quad :ease-in-out-cubic :ease-in-out-quart :ease-in-out-quint :ease-in-out-expo :ease-in-out-circ}
. Default :ease-in-out-cubic
. Which
easing function to use for the CSS transitions.
:appear
. Pred boolean?
. Default false
. Normally a component is not
transitioned if it is shown when the Transition
component mounts. If you
want to transition on the first mount set appear to true
, and the component
will transition in as soon as the Transition
mounts.
:enter
. Pred boolean
. Default true
. Enable or disable enter
transitions.
:exit
. Pred boolean
. Default true
. Enable or disable enter
transitions.
:on-exit
. Pred fn?
. Default noop
. Callback fired before the exiting
status is applied.
:on-exited
. Pred fn?
. Default noop
. Callback fired after the exited
status is applied.
:on-enter
. Pred fn?
:on-entered
. Pred fn?
. Default noop
. Callback fired after the
entered
status is applied. This prop is passed to the inner Transition
component.
:classes
. Pred: keys #{:transition :child-container}
, vals string?
.
Default nil
. A map of override classes, one for the Transition
component,
and one for the child-container
, which is the innermost child.
Important note It is important that height is set with CSS on the
TransitionGroup
, by passing a string with the :class
key value pair. It is
deliberately not set by this component since the height can be one of any
number of things like 100%, 100vh or a hardcoded size like 200px. This
component will not work unless a height it set.
It is also important that you set a :key
on the children of this component
since that's whats used to differentiate between children when animating.
Example usage
(let [images ["url1" "url2" "url3"]
image (r/atom (first images))]
(fn []
[Slide {:direction :left
:classes {:child-container "my-child-class"}
:class "my-main-class-with-included-height"}
[:div {:on-click #(swap! image (rand-nth images))
:key @image}
[:img {:src @image}]]]))
Slide components in and out based on mount status using [react-transition-group](https://github.com/reactjs/react-transition-group) **Properties** Slide takes a map of properties, many properties passed to the slide component are passed through to TransitionGroup (container) or Transition (child). * `:direction`. Pred: `#{:up :down :left :right}`. Default: `:left`. Which direction the component should be animated. * `:duration`. Pred: `pos-int?`. Default `500`. The duration used for the slide animation in milliseconds. * `:timeout`. Pred `pos-int?`. Default `500`. The duration of the transition, in milliseconds. This prop is passed to the `Transition` component. * `:unmount-on-exit`. Pred `boolean?`. Default `false`. By default the child component stays mounted after it reaches the `exited` state. Set this if you'd prefer to unmount the component after it finishes exiting. This prop is passed to the `Transition` component. * `:mount-on-enter`. Pred `boolean?`. Default `false`. By default the child component is mounted immediately along with the parent `Transition` component. If you want to `lazy mount` the component on the first `(= :in true)` you can set mount-on-enter. After the first enter transition the component will stay mounted, even on `exited` , unless you also specify unmount-on-exit. This prop is passed to the Transition component. * `:class`. Pred `string?`. Default `nil`. String classname to be applied to the outer `TransitionGroup` component. * `:easing`. Pred `#{:ease-in-quad :ease-in-cubic :ease-in-quart :ease-in-quint :ease-in-expo :ease-in-circ :ease-out-quad :ease-out-cubic :ease-out-quart :ease-out-quint :ease-out-expo :ease-out-circ :ease-in-out-quad :ease-in-out-cubic :ease-in-out-quart :ease-in-out-quint :ease-in-out-expo :ease-in-out-circ}`. Default `:ease-in-out-cubic`. Which easing function to use for the CSS transitions. * `:appear`. Pred `boolean?`. Default `false`. Normally a component is not transitioned if it is shown when the `Transition` component mounts. If you want to transition on the first mount set appear to `true`, and the component will transition in as soon as the `Transition` mounts. * `:enter`. Pred `boolean`. Default `true`. Enable or disable enter transitions. * `:exit`. Pred `boolean`. Default `true`. Enable or disable enter transitions. * `:on-exit`. Pred `fn?`. Default `noop`. Callback fired before the `exiting` status is applied. * `:on-exited`. Pred `fn?`. Default `noop`. Callback fired after the `exited` status is applied. * `:on-enter`. Pred `fn?` * `:on-entered`. Pred `fn?`. Default `noop`. Callback fired after the `entered` status is applied. This prop is passed to the inner `Transition` component. * `:classes`. Pred: keys `#{:transition :child-container}`, vals `string?`. Default `nil`. A map of override classes, one for the `Transition` component, and one for the `child-container`, which is the innermost child. **Important note** It is important that height is set with CSS on the `TransitionGroup`, by passing a string with the `:class` key value pair. It is deliberately not set by this component since the height can be one of any number of things like 100%, 100vh or a hardcoded size like 200px. This component will not work unless a height it set. It is also important that you set a `:key` on the children of this component since that's whats used to differentiate between children when animating. **Example usage** ```clojure (let [images ["url1" "url2" "url3"] image (r/atom (first images))] (fn [] [Slide {:direction :left :classes {:child-container "my-child-class"} :class "my-main-class-with-included-height"} [:div {:on-click #(swap! image (rand-nth images)) :key @image} [:img {:src @image}]]])) ```
cljdoc is a website building & hosting documentation for Clojure/Script libraries
× close