Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 6404cf1

Browse files
Merge branch 'release/2.1.2'
2 parents 49f954b + 2d11c9d commit 6404cf1

19 files changed

+413
-301
lines changed

‎.storybook/webpack.config.js‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,28 +10,31 @@ const path = require('path');
1010
const SRC = path.resolve('./src');
1111
const STORIES = path.resolve('./stories');
1212

13-
module.exports = {
14-
resolve: {
15-
alias: {
16-
'react-scroll-parallax': SRC,
17-
components: path.resolve(SRC + 'components'),
18-
},
19-
},
13+
// Export a function. Accept the base config as the only param.
14+
module.exports = async ({ config, mode }) => {
15+
// `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
16+
// You can change the configuration based on that.
17+
// 'PRODUCTION' is used when building the static version of storybook.
2018

21-
module: {
22-
rules: [
19+
// Make whatever fine-grained changes you need
20+
config.module.rules.push({
21+
test: /\.scss|.css$/,
22+
use: [
23+
'style-loader',
2324
{
24-
test: /\.scss|.css$/,
25-
use: [
26-
'style-loader',
27-
{
28-
loader: 'css-loader',
29-
options: { importLoaders: 1, modules: true },
30-
},
31-
'sass-loader',
32-
],
33-
include: STORIES,
25+
loader: 'css-loader',
26+
options: { importLoaders: 1, modules: true },
3427
},
28+
'sass-loader',
3529
],
36-
},
30+
include: STORIES,
31+
});
32+
33+
config.resolve.alias = {
34+
'react-scroll-parallax': SRC,
35+
components: path.resolve(SRC + 'components'),
36+
};
37+
38+
// Return the altered config
39+
return config;
3740
};

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-scroll-parallax",
3-
"version": "2.1.1",
3+
"version": "2.1.2",
44
"description": "React components to create parallax scroll effects for banners, images or any other DOM elements.",
55
"repository": {
66
"type": "git",

‎stories/Container.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
22
import { ParallaxProvider } from 'react-scroll-parallax';
33

4-
const Container = ({ children, scrollAxis }) => (
4+
const Container = ({ children, scrollAxis, className }) => (
55
<ParallaxProvider scrollAxis={scrollAxis}>
66
<div className={scrollAxis}>
7-
<div className="elements">{children}</div>
7+
<div className={className}>{children}</div>
88
</div>
99
</ParallaxProvider>
1010
);

‎stories/Element/Element.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
display: flex;
1717
align-items: center;
1818
justify-content: center;
19+
background: slateblue;
1920
}
2021

2122
.box {

‎stories/Image/Image.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
import { withController } from 'react-scroll-parallax';
4+
import style from './Image.scss';
5+
6+
class Image extends Component {
7+
static propTypes = {
8+
parallaxController: PropTypes.object.isRequired,
9+
src: PropTypes.string.isRequired,
10+
};
11+
12+
handleLoad = () => {
13+
// updates cached values after image dimensions have loaded
14+
this.props.parallaxController.update();
15+
};
16+
17+
render() {
18+
return (
19+
<div className={style.image}>
20+
<img src={this.props.src} onLoad={this.handleLoad} />
21+
</div>
22+
);
23+
}
24+
}
25+
26+
export default withController(Image);

‎stories/Image/Image.scss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.images {
2+
padding: 20% 10%;
3+
display: flex;
4+
flex-flow: row wrap;
5+
justify-content: space-between;
6+
align-content: center;
7+
}
8+
9+
.parallaxImage {
10+
margin: 10% 0;
11+
width: 45%;
12+
background: none;
13+
}
14+
15+
.parallaxImage2 {
16+
margin: 10% auto 10%;
17+
width: 65%;
18+
background: none;
19+
}
20+
21+
.image {
22+
img {
23+
display: block;
24+
width: 100%;
25+
height: auto;
26+
}
27+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /