Skip to content

Commit

Permalink
* Added 2 examples
Browse files Browse the repository at this point in the history 
* Updated readme
* Added detect top element while scrolling
  • Loading branch information
Eward Somers committed May 28, 2018
1 parent 53f8193 commit 32d2a67
Show file tree
Hide file tree
Showing 5 changed files with 151 additions and 28 deletions.
16 changes: 9 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,18 @@ A simple scrolling container for react.
| Prop | Type | What does it do |
| :-------- | :---- | :-------- |
| ContainerId | String | The id of the container to use for navigation. |
| ExtraStyle | Object | Inline css object to be added to the container div. |
| ExtraClass | String | Extra classname(s) to be added to the container div. |
| TopScroll | Bool | Should container detect the currently active top element. |
| TopScrollCallback | Func | Callback which provides the new active element. |

#### ScrollTo

| Prop | Type | What does it do |
| :-------- | :---- | :-------- |
| SectionId | String | The id of the section to navigate to. |
| ContainerId | String | The id of the container the element is in. |
| Duraton | Integer | The time it will take the scroll to complete the distance in ms.|
| Duration | Integer | The time it will take the scroll to complete the distance in ms.|
| Offset | Integer | The amount to offset the scrolling to ( 10 means it will scroll 10 pixels higher.)|


Expand All @@ -49,12 +53,10 @@ Using the containerId ensures you call a unique element in that specific contain

```javascript
<ScrollContainer id="newContainer">
<div>
<ScrollSection id="section1">
<somecomponent />
</ScrollSection>
....
</div>
<ScrollSection id="section1">
<somecomponent />
</ScrollSection>
....
</ScrollContainer>
```

Expand Down
7 changes: 6 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-simple-scroll-container",
"version": "1.1.0",
"version": "1.2.0",
"description": "A simple scroll container for React.",
"main": "lib/index.js",
"module": "es/index.js",
Expand Down Expand Up @@ -28,6 +28,11 @@
"url": "https://github.com/Pixelatex/react-simple-scroll/issues"
},
"homepage": "https://github.com/Pixelatex/react-simple-scroll#readme",
"peerDependencies": {
"react": "^16.4.0",
"react-dom": "^16.4.0",
"scroll-into-view": "^1.9.3"
},
"dependencies": {
"prop-types": "^15.6.1",
"react": "^16.4.0",
Expand Down
69 changes: 49 additions & 20 deletions src/components/ScrollContainer/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,41 @@ import PropTypes from 'prop-types'
import { findDOMNode } from 'react-dom'

class ScrollContainer extends React.Component {
state = {
activeElement: ''
};

static childContextTypes = {
scroll: PropTypes.object,
};

elements = {};

handleScroll = () => {
// console.log('isScrolling', this.elements)
// Object.keys(this.elements).map(key => {
// const node = document.getElementById(key)
// console.log(node, 'the full node')
//
// if (node.offsetTop < 50) {
// console.log(key, ' is on top!')
// }
// })
// if (this.state.sectionRendered) {
// const n = findDOMNode(this)
// if (n.offsetTop < 50) {
// console.log(this.props.id, ' is on top!')
// }
// console.log(n.offsetTop, 'offset')
// }
handleScroll = (e) => {
// This should be updated to handle the detection when a scroll element is on top

const containerScrollTop = this.container.scrollTop;
const containerOffset = this.container.offsetHeight;

Object.keys(this.elements).map(key => {
const element = this.elements[key];
const remainingDistanceToTop = element.offsetTop - ((containerOffset + containerScrollTop) + element.offsetHeight /2);

if( remainingDistanceToTop < 0) {
// Do the call back with the active id
if(this.state.activeElement !== key) {
this.setState({
activeElement: key
});
this.props.topScrollCallback(key);


}
}
})
};

getNode = (name) => {

return findDOMNode(this.elements[name]);
};

Expand All @@ -51,12 +59,33 @@ class ScrollContainer extends React.Component {
}

render() {
return <div id={this.props.containerId} onScroll={this.handleScroll}>{React.Children.only(this.props.children)}</div>
return (
<div
style={{overflowY: 'scroll', ...this.props.extraStyle}}
id={this.props.containerId}
className={this.props.extraClassName}
onScroll={this.props.topScroll ? this.handleScroll : () => null}
ref={ref => this.container = ref}
>
{this.props.children}
</div>)
}
}

ScrollContainer.defaultProps = {
containerId: ''
containerId: '',
topScroll: false,
topScrollCallback: () => null,
extraStyle: {},
extraClassName: ''
};

ScrollContainer.propTypes = {
containerId: PropTypes.string,
topScroll: PropTypes.bool,
topScrollCallback: PropTypes.func,
extraStyle: PropTypes.object,
extraClassName: PropTypes.string
};

export default ScrollContainer
45 changes: 45 additions & 0 deletions src/examples/withContainerId.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React, { Component } from 'react';
import { ScrollContainer, ScrollSection, ScrollTo } from 'react-simple-scroll'

class App extends Component {
render() {
return (
<div>
<header>
<h1>Example for using the module with the container id</h1>
<button onClick={() => ScrollTo('section1', 'testContainer')}>Go to 1</button>
<button onClick={() => ScrollTo('section5', 'testContainer')}>Go to 5</button>
</header>
<div>
<ScrollContainer
topScroll
topScrollCallback={(id) => console.log(id, 'active id!')}
extraStyle={{ height: '200px', backgroundColor: 'gray'}}
containerId="testContainer"
>
<ScrollSection sectionId="section1">
<div style={{ height: '40px'}}>Section 1</div>
</ScrollSection>
<ScrollSection sectionId="section2">
<div style={{ height: '70px'}}>Section 2</div>
</ScrollSection>
<ScrollSection sectionId="section3">
<div style={{ height: '70px'}}>Section 3</div>
</ScrollSection>
<ScrollSection sectionId="section4">
<div style={{ height: '70px'}}>Section 4</div>
</ScrollSection>
<ScrollSection sectionId="section5">
<div style={{ height: '70px'}}>Section 5</div>
</ScrollSection>
<ScrollSection sectionId="section6">
<div style={{ height: '70px'}}>Section 6</div>
</ScrollSection>
</ScrollContainer>
</div>
</div>
);
}
}

export default App;
42 changes: 42 additions & 0 deletions src/examples/withoutContainerId.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React, { Component } from 'react';
import { ScrollContainer, ScrollSection, ScrollTo } from 'react-simple-scroll'

class App extends Component {
render() {
return (
<div>
<header>
<h1>Example for using the module without the container id</h1>
<button onClick={() => ScrollTo('section1')}>Go to 1</button>
<button onClick={() => ScrollTo('section5')}>Go to 5</button>
</header>
<div>
<ScrollContainer
extraStyle={{ height: '200px', backgroundColor: 'gray'}}
>
<ScrollSection sectionId="section1">
<div style={{ height: '40px'}}>Section 1</div>
</ScrollSection>
<ScrollSection sectionId="section2">
<div style={{ height: '70px'}}>Section 2</div>
</ScrollSection>
<ScrollSection sectionId="section3">
<div style={{ height: '70px'}}>Section 3</div>
</ScrollSection>
<ScrollSection sectionId="section4">
<div style={{ height: '70px'}}>Section 4</div>
</ScrollSection>
<ScrollSection sectionId="section5">
<div style={{ height: '70px'}}>Section 5</div>
</ScrollSection>
<ScrollSection sectionId="section6">
<div style={{ height: '70px'}}>Section 6</div>
</ScrollSection>
</ScrollContainer>
</div>
</div>
);
}
}

export default App;

0 comments on commit 32d2a67

Please sign in to comment.