f1-sticky
Simple sticky component for React-Redux projects. Allows for a containing panel to have a "sticky" child: when the panel is scrolled down past the child's top it remains at the top of it, allowing the rest of the content to scroll.
Install
npm i f1-redux-fixed --save
Usage
In the containing component (the overflowing container):
import { StickyParent } from 'f1-sticky'
const Parent = () =>
<StickyParent updateRate={10}>
{/* some content... */}
<Content />
</StickyParent>
updateRate
is optional but can be specified to limit the # of updates per
second. It will slightly delay the component becoming "sticky" but can
improve performance on an app with a lot of components.
The parent needs to be the positioning anchor for the sticky child (i.e., position: relative
)
In the child component:
import { StickyChild } from 'f1-sticky'
const Child = () =>
<StickyChild>
<SomeElement />
</StickyChild>
You also need to include the reducer when you create your store:
import {reducer as stickyReducer} from 'f1-sticky'
const store = createStore(combineReducers({
sticky: stickyReducer
// ... other reducers ...
}))
Putting it together (see also the example in the example
folder):
import React from 'react'
import {StickyParent, StickyChild} from 'f1-sticky'
const App = () =>
<div className="outer">
<div className="left">
I am left bar
</div>
<main>
<div className="search-bar">
I am top bar. I stay visible.
</div>
<div className="content">
<StickyParent className="scroller">
<div className="filterbar">I am filter. I hide when we start scrolling</div>
<StickyChild><div className="innersticky">I am sticky</div></StickyChild>
<div className="placeholder"></div>
<div className="bottom">I am not sticky</div>
</StickyParent>
</div>
</main>
</div>
Limitations
- You cannot currently have 2 sticky children. Put them both under the same container.
- If you have more than 1 sticky parent / child in your page, you need to give them different names (pass a name prop to both parent and child)
- There is a react-sticky component that has a lot more options but is more complex and does not work well for a component that is positioned relative to a container that is itself positioned relative to another one.
Development
- Use
npm start
to start a sample page - Use
npm test
to run the tests