Repository files navigation

Not another carousel; animates horizontal slide transitions between steps ofa form or levels of a drilldown.

• Usage
• Props
• SimpleViewSlider

npm install --save react-view-slider

importReactfrom'react'importReactDOMfrom'react-dom'importViewSliderfrom'react-view-slider'// This function renders the view at the given index.constrenderView=({ index, active, transitionState})=>(<div><h3>View{index}</h3><p>I am{active ?'active' :'inactive'}</p><p>transitionState:{transitionState}</p></div>)// activeView specifies which view should currently be showing.  Whenever you change it, ViewSlider will make the// view at the new activeView horizontally slide into view.ReactDOM.render(<ViewSliderrenderView={renderView}numViews={3}activeView={0}animateHeight/>,document.getElementById('root'))

This function renders each view.ViewSlider will call it with the followingprops:

• index: number - the index of the view (starting at 0)
• active: boolean - whether the view should currently be showing
• transitionState: 'in' | 'out' | 'entering' | 'leaving' - the view's transition state

The number of views present.ViewSlider will only render all views when transitioning; when idle, it willonly render the active view.

The index of the view that should be showing. Whenever you change this,ViewSlider will animate a horizontal slidetransition to the view at the new index.

How much horizontal space to put between the views.spacing={1.5} will spacethe views apart by 50% of the width,spacing={2} will space the views apartby 100% of the width, etc.

Views without much horizontal padding or margin of their own will look jammedtogether during transitions with a defaultspacing of 1, so in that caseyou'll want to increase thespacing.

A negative number will reverse the view order;spacing={-1.5} will arrange views from right to left with 50% width viewspacing. You can also use thertl property for this, especially if you wantthe views to inheritdirection: rtl for their own content layout.

Whether to use right-to-left layout. This will reverse the view order and applydirection: rtl to the viewport style, and each view will inherit that layoutdirection for its own content as well.

To reverse the view order withoutchanging layout direction of each view's content, you can use a negative numberforspacing.

Iftrue,ViewSlider will keep all views mounted after transitioning, not just the active view.You may want to use this if there is a noticeable lag while other views mount at the beginning of a transition.However, it disables height animation and will cause the height ofViewSlider to be the max of all views' heights,so you will get best results if you also usefillParent={true}.

If truthy,ViewSlider will animate its height to match the height of the view atactiveView.

The duration of the transition between views.

The timing function for the transition between views.

If given, will be called when the slide transition ends.

If given, overrides theinline-style-prefixer used to autoprefix inline styles.

If truthy,ViewSlider will use absolute positioning on itself and its views to fill its parent element.

Any extra class names to add to the root element.

Extra inline styles to add to the root element.

Any extra class names to add to the inner "viewport" element.

Extra inline styles to add to the inner "viewport" element.

Extra inline styles to add to the view wrapper elements.

Extra inline styles to add to the inner div between theviewStyle div and yourview content element. (The inner div was added to ensure perfect heightanimation.)

Theref to pass to the root<div> element rendered byViewSlider.

Theref to pass to the viewport<div> element rendered inside the root<div> byViewSlider.

This is a wrapper forViewSlider that takes a single child element. It renders theViewSlider with the child's key(converted to a number) as theactiveView and caches past child elements by key.

importSimpleViewSliderfrom'react-view-slider/simple'ReactDOM.render(<SimpleViewSlider><divkey={0}>This is view 0</div></SimpleViewSlider>,document.getElementById('root'))// Rendering a child with a different key will trigger the transition.ReactDOM.render(<SimpleViewSlider><divkey={1}>This is view 1</div></SimpleViewSlider>,document.getElementById('root'))

Iftrue,SimpleViewSlider will keep views preceding the active view mounted, but not views following the active view.(As mentioned above, the order is determined by thechildren'skeys.)