Skip to content

Commit f9fdd55

Browse files
author
Federico Zivolo
committed
v2.0.0
Updated API and switched to Rollup
1 parent 4c26f01 commit f9fdd55

File tree

11 files changed

+1166
-141
lines changed

11 files changed

+1166
-141
lines changed

‎.npmignore‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
webpack.config.js
2-
example.js
1+
rollup.config.js
2+
docs/

‎README.md‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,32 +21,29 @@ npm install react-resize-aware --save
2121
# Usage
2222

2323
> **note**: `ResizeAware` needs a position different from `initial` to work!
24-
> Make sure to set it to `relative`, `absolute` or `fixed` trough `style` or CSS
24+
> Make sure to set it to `relative`, `absolute` or `fixed` using its `style` property or with CSS
2525
2626
```jsx
27-
import React, { Component } from 'react'
28-
import { findDOMNode } from 'react-dom'
29-
import ResizeAware from 'react-resize-aware'
30-
31-
export default class FooBar extends Component {
32-
render() {
33-
return (
34-
<ResizeAware ref='container' style={{position: 'relative'}}>
35-
Hello, World!
36-
</ResizeAware>
37-
)
38-
}
39-
40-
componentDidMount() {
41-
findDOMNode(this.refs.container).addEventListener('resize', (evt) => {
42-
console.log('Component has been resized!')
43-
})
44-
}
27+
import React from 'react';
28+
import ResizeAware from 'react-resize-aware';
29+
30+
// This component will get rerendered everytime its width or height changes
31+
function MyComponent({width, height}) {
32+
return <div>{width}x{height}</div>;
33+
}
34+
35+
function App() {
36+
return (
37+
<ResizeAware>
38+
<MyComponent />
39+
</ResizeAware>
40+
);
4541
}
42+
4643
```
4744

4845

4946
# License
5047

5148
MIT License
52-
Copyright 2016, Federico Zivolo
49+
Copyright 2016+, Federico Zivolo

‎docs/example.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
function MyComponent({width, height}) {
2+
return React.createElement(
3+
'div',
4+
{className: 'example'},
5+
"Hover me! I don't rely on any DOM manipulation, transition event or anything, I use a real resize event!",
6+
React.createElement('br', null),
7+
`${width}x${height}`
8+
);
9+
}
10+
11+
function App() {
12+
return React.createElement(
13+
ReactResizeAware,
14+
{style: {position: 'relative'}},
15+
React.createElement(MyComponent)
16+
);
17+
}
18+
19+
ReactDOM.render(
20+
React.createElement(App, null),
21+
document.querySelector('#root')
22+
);

‎docs/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Example</title>
5+
<style>
6+
.example {
7+
background-color: rebeccapurple;
8+
height: 100px;
9+
color: white;
10+
transition: 1s height ease-in-out
11+
}
12+
.example:hover {
13+
height: 200px;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<div id="root"></div>
19+
<a href="https://github.com/fezvrasta/react-resize-aware">GitHub page</a>
20+
<script src="https://unpkg.com/react/dist/react.js"></script>
21+
<script src="https://unpkg.com/react-dom/dist/react-dom.js"></script>
22+
<script src="./react-resize-aware.js"></script>
23+
<script src="./example.js"></script>
24+
</body>
25+
</html>

‎docs/react-resize-aware.js‎

Lines changed: 128 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example.js‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎package.json‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
22
"name": "react-resize-aware",
3-
"version": "1.0.12",
3+
"version": "2.0.0",
44
"description": "A resize aware component used to detect sizes changes on your components",
5-
"main": "dist/ResizeAware.js",
5+
"main": "dist/index.js",
66
"scripts": {
7-
"prepublish": "NODE_ENV=production webpack -p && echo `gzip -c dist/resizeAware.js | wc -c`"
7+
"prepare": "NODE_ENV=production rollup -c rollup.config.js && cp dist/index.js docs/react-resize-aware.js"
88
},
99
"repository": {
1010
"type": "git",
@@ -28,9 +28,10 @@
2828
},
2929
"homepage": "https://github.com/FezVrasta/react-resize-aware#readme",
3030
"devDependencies": {
31-
"babel-core": "~5",
32-
"babel-loader": "~5",
33-
"react": "~15.0.1",
34-
"webpack": "~1"
31+
"babel-preset-es2015": "^6.24.1",
32+
"babel-preset-stage-2": "^6.24.1",
33+
"react": "^15.5.4",
34+
"rollup": "^0.41.6",
35+
"rollup-plugin-babel": "^2.7.1"
3536
}
3637
}

‎rollup.config.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import babel from 'rollup-plugin-babel';
2+
3+
export default {
4+
entry: 'src/index.js',
5+
dest: 'dist/index.js',
6+
moduleName: 'ReactResizeAware',
7+
format: 'umd',
8+
sourceMap: true,
9+
external: ['react'],
10+
globals: {
11+
react: 'React',
12+
},
13+
plugins: [
14+
babel({
15+
presets: [['es2015', {modules: false}], 'stage-2'],
16+
}),
17+
],
18+
};

0 commit comments

Comments
 (0)