awesome-columns
v2.0.1
Published
Easily create columns with modified scroll speeds to ensure that all columns reach the end at the same time
Downloads
31
Readme
AwesomeColumns
Easy to create columns for React with calculated scroll speeds
Version History
v2.0.0:
- Core structure updates
- Changed from reliance on react states to RAF for updates
- Improved mobile compatibility
- Removed smooth scrolling (not functioning) and added scrollResolution
v1.0.0-1.1.16:
- Project initialisation
- Typescript features
- onScroll, onTop, and onBottom functionality
Usage
import AwesomeColumns, { Column } from "awesome-columns";
export default function App() {
const ContainerStyle ={color:"blue"}
return (
<div className="container">
<AwesomeColumns style={ContainerStyle}>
<Column>
Your first column's content
</Column>
<Column>
Your second column's content
</Column>
<Column reverse>
Your last column's content
</Column>
</AwesomeColumns>
</div>
);
}
By default, the container is set to 100vh and 100% width!
Additional parameters
AwesomeColumns
<AwesomeColumns {parameters}></AwesomeColumns>
style
:object
- React styled component, pass in css styles to the container
height
:string
- Height of the containing div
width
:string
- Width of the containing div
scrollResolution
: number
- As the name implies creates a scroll resoution with the value in % of the total scrollable height
e.g.:
<AwesomeColumns width={"50%"} height={"200px"} style={{color:"blue}}> {Columns}</AwesomeColumns>
Column
<Column {parameters}></Column>
style
:object
- React styled component, pass in css styles to the column
reverse
:boolean
- Flips the column 180 degrees
padding
: string
- Designate padding to the AwesomeColumnContent class easily
onTop
: function
- A functional prop that executes when the columns reach the top
onBottom
: function
- A functional prop that executes when the columns reach the bottom
onScroll
: function
- A functional prop that executes on scroll with the current scroll height as a parameter (in %)
e.g.:
<Column style={{color:"blue}}> Content goes here</AwesomeColumns>
<Column reverse> Upside-down content goes here</Column>
<Column padding={"5px"}> This column will span 3 columns</Column>
CSS modifiers (Class names for css modification)
AwesomeColumnContainer
- wrapper class for AwesomeColumns
AwesomeColumn
- wrapper class for Column
AwesomeColumnContent
- Inner class for Column (for reverse and effects)
AwesomeColumnSubContent
- wrapper class for your content