1.1.11 • Published 6 years ago
react-section v1.1.11
react-section
npm -i react-section
Marking dom element mostly use for getting element position and offsets, scroll to element or implement lazy loading
All functions and props
componentDidMount() {
console.log(this.section);
this.section.getFlagsOffSet()
this.section.getFlagsPosition()
this.section.flagsNode
this.section.flagsRef
this.section.inViewFlag
this.section.scrollToFlag()
}
Scroll to section
class App extends Component {
constructor(props) {
super(props);
this.section = React.createRef();
}
onClick = flag => {
this.section.scrollToFlag(flag);
};
render() {
return (
<Section onRef={ref => (this.section = ref)}>
<button onClick={() => this.onClick("header")}>Go to header</button>
<button onClick={() => this.onClick("body")}>Go to body</button>
<Section.Flag
style={{ height: "30vh", marginTop: "60px" }}
flagName="header"
>
<h1>Header</h1>
</Section.Flag>
<Section.Flag className="body" flagName="body">
<h1>Body</h1>
</Section.Flag>
</Section>
);
}
}
scrollToFlag = (flagName, top = 0, duration = 500) => {..}
flagName: Name of marking flag is required
top: Offset from top default is 0
duration: Duration default is 500
Lazyload
<Section onRef={ref => (this.section = ref)}>
<!-- Flag will not accept children is lazyLoad props is provided -->
<Section.Flag
lazyLoad={{
// Loaded delay time
delay: 2000,
// initProps apply to Flag not the loading component
initProps: {
className: "beforeload",
style: {
backgroundColor: "green"
}
},
// Props component will receivie after it is loaded
loadedProps: { onClick: () => alert("Hi i'm lazy 1") }
loading: () => <h1>I will load after 2s</h1>,
loaded: () => import("./component/Loaded"),
}}
flagName="lazyheader"
className="component__lazy"
/>
<Section.Flag
lazyLoad={{
// Again these props apply to the Flag not the component
// and will be remove after component is loaded
initProps: {
className: "beforeload",
style: {
backgroundColor: "green"
}
},
// Component will be loaded when appear in to viewport
loadOnView: true,
// Component will be loaded when scroll down 200px from it
fromBottom: 200,
loadedProps: {
onClick: () => alert("Hi i'm lazy 2")
}
loading: () => <h1>Scroll down 200px from me to load</h1>,
loaded: () => import("./component/Loaded2"),
}}
flagName="lazyheader2"
className="component__lazy"
/>
</Section>
Peer dependencies: "react-scroll": "^1.7.10"
1.1.11
6 years ago
1.1.10
6 years ago
1.1.9
6 years ago
1.1.8
6 years ago
1.1.7
6 years ago
1.1.6
6 years ago
1.1.5
6 years ago
1.1.4
6 years ago
1.1.3
6 years ago
1.1.2
6 years ago
1.1.1
6 years ago
1.1.0
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago