Skip to content

Commit 487a796

Browse files
aitheriosaitherios
committed
Create HOC boilerplate
0 parents  commit 487a796

File tree

11 files changed

+348
-0
lines changed

11 files changed

+348
-0
lines changed

‎.editorconfig‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
[*]
2+
indent_style = space
3+
indent_size = 2
4+
end_of_line = lf
5+
charset = utf-8
6+
trim_trailing_whitespace = true
7+
insert_final_newline = true
8+
9+
# Indentation
10+
[src/**.{js,jsx,css,sass,scss}]
11+
indent_style = space
12+
indent_size = 2

‎.gitignore‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
dist
2+
3+
# https://github.com/github/gitignore/blob/master/Node.gitignore
4+
5+
# Logs
6+
logs
7+
*.log
8+
npm-debug.log*
9+
10+
# Runtime data
11+
pids
12+
*.pid
13+
*.seed
14+
15+
# Directory for instrumented libs generated by jscoverage/JSCover
16+
lib-cov
17+
18+
# Coverage directory used by tools like istanbul
19+
coverage
20+
21+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
22+
.grunt
23+
24+
# node-waf configuration
25+
.lock-wscript
26+
27+
# Compiled binary addons (http://nodejs.org/api/addons.html)
28+
build/Release
29+
30+
# Dependency directories
31+
node_modules
32+
jspm_packages
33+
34+
# Optional npm cache directory
35+
.npm
36+
37+
# Optional REPL history
38+
.node_repl_history

‎.npmignore‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# https://github.com/github/gitignore/blob/master/Node.gitignore
2+
3+
# Logs
4+
logs
5+
*.log
6+
npm-debug.log*
7+
8+
# Runtime data
9+
pids
10+
*.pid
11+
*.seed
12+
13+
# Directory for instrumented libs generated by jscoverage/JSCover
14+
lib-cov
15+
16+
# Coverage directory used by tools like istanbul
17+
coverage
18+
19+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
20+
.grunt
21+
22+
# node-waf configuration
23+
.lock-wscript
24+
25+
# Compiled binary addons (http://nodejs.org/api/addons.html)
26+
build/Release
27+
28+
# Dependency directories
29+
node_modules
30+
jspm_packages
31+
32+
# Optional npm cache directory
33+
.npm
34+
35+
# Optional REPL history
36+
.node_repl_history

‎LICENSE‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
Copyright (c) 2016, Team Magneto
2+
3+
Permission to use, copy, modify, and/or distribute this software for any
4+
purpose with or without fee is hereby granted, provided that the above
5+
copyright notice and this permission notice appear in all copies.
6+
7+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
8+
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
9+
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
10+
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
11+
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
12+
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
13+
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

‎Makefile‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.SILENT:
2+
.PHONY: build
3+
4+
build:
5+
npm run build

‎README.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# react-within-viewport
2+
3+
Debounced React high order component to flag when it's container is inside the viewport.
4+
5+
## Usage
6+
7+
Let's build an example react component:
8+
9+
```js
10+
const Header = ({ style }) => (<h1 style={style}>Header</h1>)
11+
```
12+
13+
And decorate:
14+
15+
```js
16+
import WithinViewport from 'react-within-viewport'
17+
18+
const Decorated = WithinViewport()(Header)
19+
```
20+
21+
Now when you use `<Decorated />` it will pass the boolean property `inViewport`.
22+
23+
You can change the property name by passing a transformation function, example:
24+
25+
```js
26+
const Decorated = WithinViewport(
27+
{ transform: (inViewport) => ({ insideViewport: inViewport }) }
28+
)(Header)
29+
```
30+
31+
The property passed to the `Header` would change to `insideViewport`
32+
33+
You can also change the wrapper div style to meet your needs like:
34+
35+
```js
36+
const Decorated = WithinViewport(
37+
{ containerStyle: { display: 'inline-block' } }
38+
)(Header)
39+
```
40+
41+
## Contributing
42+
43+
First of all, **thank you** for wanting to help!
44+
45+
1. [Fork it](https://help.github.com/articles/fork-a-repo).
46+
2. Create a feature branch - `git checkout -b more_magic`
47+
3. Add tests and make your changes
48+
4. Check if tests are ok - `npm test`
49+
5. Commit changes - `git commit -am "Added more magic"`
50+
6. Push to Github - `git push origin more_magic`
51+
7. Send a [pull request](https://help.github.com/articles/using-pull-requests)! :heart: :sparkling_heart: :heart:

‎package.json‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
{
2+
"name": "react-within-viewport",
3+
"version": "1.0.0",
4+
"description": "Debounced React high order component to flag when it's container is inside the viewport.",
5+
"main": "dist/index.js",
6+
"scripts": {
7+
"test": "jest",
8+
"clean": "rm -rf dist",
9+
"transpile": "babel src -D -d dist --ignore '__tests__'",
10+
"bundle": "webpack --config webpack.config.js",
11+
"build": "npm run lint && npm run clean && npm run transpile && npm run bundle",
12+
"lint": "eslint ./src"
13+
},
14+
"repository": {
15+
"type": "git",
16+
"url": "git+ssh://[email protected]/team-magneto/react-within-viewport.git"
17+
},
18+
"keywords": [
19+
"react",
20+
"within-viewport",
21+
"isomorphic",
22+
"inline-style",
23+
"high-order-component"
24+
],
25+
"author": "Team Magneto",
26+
"license": "ISC",
27+
"bugs": {
28+
"url": "https://github.com/team-magneto/react-within-viewport/issues"
29+
},
30+
"homepage": "https://github.com/team-magneto/react-within-viewport#readme",
31+
"dependencies": {
32+
"lodash.debounce": ">= 4.0.6 < 5",
33+
"recompose": ">= 0.19.0 < 1.0"
34+
},
35+
"peerDependencies": {
36+
"react": ">= 0.14"
37+
},
38+
"devDependencies": {
39+
"babel-cli": "^6.6.5",
40+
"babel-core": "^6.7.4",
41+
"babel-eslint": "^6.0.4",
42+
"babel-jest": "^12.0.0",
43+
"babel-loader": "^6.2.4",
44+
"babel-preset-es2015": "^6.6.0",
45+
"babel-preset-react": "^6.5.0",
46+
"babel-preset-stage-0": "^6.5.0",
47+
"enzyme": "^2.2.0",
48+
"eslint": "^2.9.0",
49+
"eslint-config-airbnb": "^9.0.1",
50+
"eslint-plugin-import": "^1.7.0",
51+
"eslint-plugin-jsx-a11y": "^1.2.0",
52+
"eslint-plugin-react": "^5.0.1",
53+
"jest-cli": "^12.0.0",
54+
"react": "^15.0.0",
55+
"react-addons-test-utils": "^15.0.0",
56+
"react-dom": "^15.0.0",
57+
"webpack": "^1.12.14"
58+
},
59+
"jest": {
60+
"unmockedModulePathPatterns": [
61+
"react",
62+
"react-dom",
63+
"react-addons-test-utils",
64+
"fbjs",
65+
"enzyme"
66+
],
67+
"rootDir": "./src"
68+
},
69+
"babel": {
70+
"presets": [
71+
"react",
72+
"es2015",
73+
"stage-0"
74+
]
75+
},
76+
"eslintConfig": {
77+
"extends": "airbnb",
78+
"env": {
79+
"browser": true,
80+
"node": true,
81+
"jasmine": true,
82+
"jest": true
83+
},
84+
"parser": "babel-eslint",
85+
"rules": {
86+
"semi": 0,
87+
"new-cap": 0
88+
}
89+
}
90+
}

‎src/__tests__/within-viewport-test.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
jest.unmock('../within-viewport')
2+
3+
import React from 'react'
4+
import WithinViewport from '../within-viewport'
5+
import { mount } from 'enzyme'
6+
7+
describe('WithinViewport()(Component)', () => {
8+
let subject
9+
const Header = ({ title }) => (<h1>{title}</h1>)
10+
Header.propTypes = { title: React.PropTypes.string }
11+
12+
describe('when composing with default options', () => {
13+
const Decorated = WithinViewport()(Header)
14+
15+
beforeEach(() => { subject = mount(<Decorated title={'My title'} />) })
16+
17+
it('renders', () => { expect(subject).toBeTruthy() })
18+
it('renders inner component', () => { expect(subject.find(Header).length).toBe(1) })
19+
it('defines a displayName', () => {
20+
expect(Decorated.displayName).toBe('withinViewport(Header)')
21+
})
22+
it('injects property inViewport', () => {
23+
expect(subject.find(Header).prop('inViewport')).not.toBeUndefined()
24+
})
25+
})
26+
27+
describe('when composing with a custom transform function', () => {
28+
})
29+
30+
describe('when composing with a different default value', () => {
31+
})
32+
})

‎src/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import WithinViewport from './within-viewport'
2+
3+
export default WithinViewport

‎src/within-viewport.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React, { Component } from 'react'
2+
import wrapDisplayName from 'recompose/wrapDisplayName'
3+
4+
const withinViewport = ({
5+
transform = ((inViewport) => ({ inViewport })),
6+
containerStyle = ({
7+
width: '100%',
8+
height: '100%',
9+
padding: 0,
10+
border: 0,
11+
}),
12+
} = {}) => (BaseComponent) => class extends Component {
13+
static displayName = wrapDisplayName(BaseComponent, 'withinViewport')
14+
15+
render() {
16+
return (
17+
<div
18+
ref={'withinViewportContainer'}
19+
style={containerStyle}
20+
>
21+
<BaseComponent
22+
{...transform(true)}
23+
{...this.props}
24+
/>
25+
</div>
26+
)
27+
}
28+
}
29+
30+
export default withinViewport

0 commit comments

Comments
 (0)