@@ -11,7 +11,6 @@ of a drilldown.
1111# Table of Contents
1212
1313- [ Usage] ( #usage )
14- - [ Using ` react-jss ` instead of ` react-view-slider.css ` ] ( #using-react-jss-instead-of-react-view-slidercss )
1514- [ Props] ( #props )
1615- [ ` withTransitionContext ` ] ( #withtransitioncontext )
1716
@@ -26,89 +25,80 @@ import React from 'react'
2625import ReactDOM from ' react-dom'
2726import ViewSlider from ' react-view-slider'
2827
29- // make sure to include react-view-slider/lib/react-view-slider.css in the page.
30- // for instance if you're using webpack:
31- import ' react-view-slider/lib/react-view-slider.css'
32-
33- // This function renders the page at the given index.
28+ // This function renders the view at the given index.
3429// At minimum you should pass the key, ref, style, and className props to the returned element.
35- const renderPage = ({index, key, ref, style, className, active, transitionState}) => (
30+ const renderView = ({index, key, ref, style, className, active, transitionState}) => (
3631 < div key= {key} ref= {ref} style= {style} className= {className}>
37- < h3> Page {index}< / h3>
32+ < h3> View {index}< / h3>
3833 < p> I am {active ? ' active' : ' inactive' < / p>
3934 < p> transitionState: {transitionState}< / p>
4035 < / div>
4136)
4237
43- // activePage specifies which page should currently be showing. Whenever you change it, ViewSlider will make the
44- // page at the new activePage horizontally slide into view.
38+ // activeView specifies which view should currently be showing. Whenever you change it, ViewSlider will make the
39+ // view at the new activeView horizontally slide into view.
4540
4641ReactDOM .render (
4742 < ViewSlider
48- renderPage = {renderPage }
49- numPages = {3 }
50- activePage = {0 }
43+ renderView = {renderView }
44+ numViews = {3 }
45+ activeView = {0 }
5146 animateHeight
5247 / > ,
5348 document .getElementById (' root'
5449)
5550```
5651
57- ## Using ` react-jss ` instead of ` react-view-slider.css `
58-
59- ``` js
60- import React from ' react'
61- import BaseViewSlider from ' react-view-slider'
62- import viewSliderStyles from ' react-view-slider/lib/styles'
63- import injectSheet from ' react-jss'
64-
65- const ViewSlider = injectSheet (viewSliderStyles)(BaseViewSlider)
66- ```
67-
6852## Props
6953
70- ##### ` renderPage : (props: PageProps ) => React.Element<any>` ** (required)**
54+ ##### ` renderView : (props: ViewProps ) => React.Element<any>` ** (required)**
7155
72- This function renders each page . ` ViewSlider ` will call it with the following ` props ` :
73- * ` index: number ` - the index of the page (starting at 0)
56+ This function renders each view . ` ViewSlider ` will call it with the following ` props ` :
57+ * ` index: number ` - the index of the view (starting at 0)
7458* ` key: number ` - the key you should pass to the returned element
7559* ` ref: (c: HTMLElement) => any ` - the ref you should pass to the returned element
7660* ` style: Object ` - the style you should pass to the returned element
77- * ` className: string ` - the className you should pass to the returned element
78- * ` active: boolean ` - whether the page should currently be showing
79- * ` transitionState: 'in' | 'out' | 'entering' | 'leaving' ` - the page's transition state
61+ * ` active: boolean ` - whether the view should currently be showing
62+ * ` transitionState: 'in' | 'out' | 'entering' | 'leaving' ` - the view's transition state
8063
8164At minimum you should pass the ` key ` , ` ref ` , ` style ` , and ` className ` props to the returned element.
8265
83- ##### ` numPages: number ` ** (required)**
66+ ##### ` numViews: number ` ** (required)**
67+
68+ The number of views present. ` ViewSlider ` will only render all views when transitioning; when idle, it will
69+ only render the active view.
8470
85- The number of pages present. ` ViewSlider ` will only render all pages when transitioning; when idle, it will
86- only render the active page.
71+ ##### ` activeView: number ` ** (required)**
8772
88- ##### ` activePage: number ` ** (required)**
73+ The index of the view that should be showing. Whenever you change this, ` ViewSlider ` will animate a horizontal slide
74+ transition to the view at the new index.
8975
90- The index of the page that should be showing. Whenever you change this, ` ViewSlider ` will animate a horizontal slide
91- transition to the page at the new index.
76+ ##### ` keepViewsMounted: boolean ` (default: ` false ` )
77+
78+ If ` true ` , ` ViewSlider ` will keep all views mounted after transitioning, not just the active view.
79+ You may want to use this if there is a noticeable lag while other views mount at the beginning of a transition.
80+ However, it disables height animation and will cause the height of ` ViewSlider ` to be the max of all views' heights,
81+ so you will get best results if you also use ` fillParent={true} ` .
9282
9383##### ` animateHeight: boolean ` (default: ` true ` )
9484
95- If truthy, ` ViewSlider ` will animate its height to match the height of the page at ` activePage ` .
85+ If truthy, ` ViewSlider ` will animate its height to match the height of the view at ` activeView ` .
9686
9787##### ` transitionDuration: number ` (default: ` 500 ` )
9888
99- The duration of the transition between pages .
89+ The duration of the transition between views .
10090
10191##### ` transitionTimingFunction: string ` (default: ` 'ease' ` )
10292
103- The timing function for the transition between pages .
93+ The timing function for the transition between views .
10494
10595##### ` prefixer: Prefixer `
10696
10797If given, overrides the ` inline-style-prefixer ` used to autoprefix inline styles.
10898
10999##### ` fillParent: boolean ` (default: ` false ` )
110100
111- If truthy, ` ViewSlider ` will use absolute positioning on itself and its pages to fill its parent element.
101+ If truthy, ` ViewSlider ` will use absolute positioning on itself and its views to fill its parent element.
112102
113103##### ` className: string `
114104
@@ -126,24 +116,21 @@ Any extra class names to add to the inner "viewport" element.
126116
127117Extra inline styles to add to the inner "viewport" element.
128118
129- ##### ` classes: {root: string, viewport: string, fillParent: string, page: string} `
119+ ##### ` rootRef: (node: ?HTMLDivElement) => any `
120+
121+ The ` ref ` to pass to the root ` <div> ` element rendered by ` ViewSlider ` .
130122
131- The ` className ` s for the various elements ` ViewSlider ` renders:
132- - ` root ` is the root ` div `
133- - ` viewport ` is the ` div ` inside ` root ` that animates horizontally
134- - ` fillParent ` is the ` className ` applied to the root ` div ` if the ` fillParent ` property is ` true `
135- - ` page ` is the ` className ` passed to ` renderPage `
123+ ##### ` viewportRef: (node: ?HTMLDivElement) => any `
136124
137- By default, they match those in ` lib/react-view-slider.css ` .
138- Otherwise, you can [ use ` react-jss ` to inject ` classes ` ] ( #using-react-jss-instead-of-react-view-slidercss ) .
125+ The ` ref ` to pass to the viewport ` <div> ` element rendered inside the root ` <div> ` by ` ViewSlider ` .
139126
140127## ` withTransitionContext `
141128
142129``` js
143130import ViewSlider from ' react-view-slider/lib/withTransitionContext'
144131```
145132
146- This works exactly like ` ViewSlider ` except that it renders its pages within a ` TransitionContext ` component from
133+ This works exactly like ` ViewSlider ` except that it renders its views within a ` TransitionContext ` component from
147134` react-transition-context ` with the given ` transitionState ` . This is useful for doing things like focusing an ` <input> `
148- element after one of the pages has transitioned in.
135+ element after one of the views has transitioned in.
149136
0 commit comments