Repository: keske/react-parallax-component
Branch: master
Commit: 9b864280381e
Files: 15
Total size: 12.1 KB
Directory structure:
gitextract_7r8enuo9/
├── .eslintrc
├── .gitignore
├── README.md
├── index.html
├── index.js
├── package.json
├── server.js
├── src/
│ ├── example/
│ │ ├── index.js
│ │ └── styles/
│ │ ├── index.js
│ │ └── styles.scss
│ ├── index.js
│ └── styles/
│ ├── index.js
│ └── styles.scss
└── webpack/
├── dev.config.js
└── prod.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintrc
================================================
{
"parser": "babel-eslint",
"extends": "airbnb",
"env": {
"browser": true,
"node": true,
"mocha": true
},
"globals": {
"connect": true
},
"rules": {
"max-len": 0,
"no-console": 0,
"no-unused-expressions": 0,
"no-param-reassign": 0,
"no-unneeded-ternary": 0,
"arrow-body-style": 0,
"react/jsx-no-bind": 0,
"default-case": 0,
"prefer-template": 0,
"padded-blocks": 0,
"camelcase": 0,
"no-else-return": 0,
"func-names": 0,
"consistent-return": 0,
"array-callback-return": 0,
"no-confusing-arrow": 0,
"no-case-declaration": 0,
"react/jsx-closing-bracket-location": 0,
"no-empty": 0,
"react/prefer-stateless-function": 0
},
"plugins": [
"react"
]
}
================================================
FILE: .gitignore
================================================
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio
*.iml
## Directory-based project format:
.idea/
# if you remove the above rule, at least ignore the following:
# User-specific stuff:
# .idea/workspace.xml
# .idea/tasks.xml
# .idea/dictionaries
# Sensitive or high-churn files:
# .idea/dataSources.ids
# .idea/dataSources.xml
# .idea/sqlDataSources.xml
# .idea/dynamic.xml
# .idea/uiDesigner.xml
# Gradle:
# .idea/gradle.xml
# .idea/libraries
# Mongo Explorer plugin:
# .idea/mongoSettings.xml
## File-based project format:
*.ipr
*.iws
## Plugin-specific files:
# IntelliJ
/out/
# mpeltonen/sbt-idea plugin
.idea_modules/
# JIRA plugin
atlassian-ide-plugin.xml
# Crashlytics plugin (for Android Studio and IntelliJ)
com_crashlytics_export_strings.xml
crashlytics.properties
crashlytics-build.properties
node_modules/
.sass-cache/
bower_components/
app/bower_components
.DS_Store
.tmp
ios
.yo-rc.json
.jshintrc
.gitattributes
.editorconfig
.babelrc
npm-debug.log
================================================
FILE: README.md
================================================
# React Parallax Component
Easiest way to add scroll parallax effect on the component.
## Installation
`npm install react-parallax-component`
## Usage
`import ParallaxComponent from 'react-parallax-component';`
```javascript
Children component
```
### Props
- `speed` _(String)_ - animation speed, default: `-0.03`
- `width` _(String)_ - component width, default: `auto`
- `height` _(String)_ - component height, default: `auto`
- `top` _(String)_ - component top position, default: `inherit`
- `left` _(String)_ - component left position, default: `inherit`
- `right` _(String)_ - component top position, default: `inherit`
## Development
```
$ npm install
```
## Run app
```
$ npm start
```
And open in browser: [http://localhost:4000](http://localhost:4000)
## Build
```
$ npm run build
```
================================================
FILE: index.html
================================================
React Parallax Component Examples
How to use
================================================
FILE: index.js
================================================
var ParallaxComponent = require('./dist/index.min.js');
module.exports = ParallaxComponent;
================================================
FILE: package.json
================================================
{
"name": "react-parallax-component",
"version": "1.0.6",
"description": "Easiest way to add scroll parallax effect on the component",
"scripts": {
"start": "node server.js",
"lint": "eslint src",
"build": "webpack --verbose --colors --display-error-details --config webpack/prod.config.js"
},
"repository": {
"type": "git",
"url": "https://github.com/keske/react-parallax-component.git"
},
"keywords": [
"react",
"reactjs",
"parallax",
"animation",
"react-component",
"webpack"
],
"author": "https://github.com/keske",
"contributors": [
"Jérémie Boulay (https://github.com/Jeremboo)"
],
"license": "MIT",
"devDependencies": {
"autoprefixer": "^6.2.1",
"babel-core": "^5.4.7",
"babel-eslint": "^4.0.7",
"babel-loader": "^5.1.4",
"babel-runtime": "^5.5.5",
"css": "^2.2.1",
"css-loader": "^0.23.1",
"csswring": "^4.1.1",
"eslint": "^1.1.0",
"eslint-config-airbnb": "^0.1.0",
"eslint-plugin-react": "^3.2.3",
"express": "^4.13.3",
"extract-text-webpack-plugin": "^0.9.1",
"morgan": "^1.6.1",
"node-sass": "^3.4.2",
"postcss-loader": "^0.8.0",
"react-dom": "^0.14.3",
"react-hot-loader": "^1.3.0",
"sass": "^0.5.0",
"sass-loader": "^3.1.2",
"style": "0.0.3",
"style-loader": "^0.13.0",
"webpack": "^1.12.9",
"webpack-dev-middleware": "^1.4.0",
"webpack-hot-middleware": "^2.6.0",
"lodash.throttle": "^4.1.1"
},
"dependencies": {
"react": "^0.14.2"
}
}
================================================
FILE: server.js
================================================
var http = require('http');
var express = require('express');
var app = express();
app.use(require('morgan')('short'));
(function initWebpack() {
var webpack = require('webpack');
var webpackConfig = require('./webpack/dev.config');
var compiler = webpack(webpackConfig);
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true, publicPath: webpackConfig.output.publicPath,
}));
app.use(require('webpack-hot-middleware')(compiler, {
log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000,
}));
app.use(express.static(__dirname + '/'));
})();
app.get('/', function root(req, res) {
res.sendFile(__dirname + '/index.html');
});
if (require.main === module) {
var server = http.createServer(app);
server.listen(process.env.PORT || 4000, function onListen() {
var address = server.address();
console.log('Listening on: %j', address);
console.log(' -> that probably means: http://localhost:%d', address.port);
});
}
================================================
FILE: src/example/index.js
================================================
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// Lib
import ParallaxComponent from '../';
// Component styles
import styles from './styles';
const WORD = 'AWESOME REACT';
const random = (min, max) => Math.random() * (max - min) + min;
export default class ExamplePage extends Component {
render() {
const wrap = {
height: window.innerHeight * 10,
};
return (
{
WORD.split('').map((letter, index) =>
1) ? 1 : -1)}
top="40%"
left={(index + 1) * 80}
key={index}
>
{letter}
)
}
this.parallaxElement = ref}
style={{ ...style, ...ownStyle }}
{...rest}
>
{children}
);
}
}
================================================
FILE: src/styles/index.js
================================================
import 'style!./styles.scss';
export default require('./styles.scss').locals.styles;
================================================
FILE: src/styles/styles.scss
================================================
:local(.styles) {
position: fixed;
img {
width: 100%;
}
}
================================================
FILE: webpack/dev.config.js
================================================
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer');
var csswring = require('csswring');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./src/example/index',
],
output: {
filename: 'bundle.js',
path: path.join(__dirname, '/dist/'),
publicPath: '/dist/',
},
plugins: [
new webpack.DefinePlugin({
__DEVELOPMENT__: true,
}),
new ExtractTextPlugin('bundle.css'),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
],
resolve: {
extensions: ['', '.jsx', '.js', '.json'],
modulesDirectories: ['node_modules', 'src'],
},
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel?stage=0&loose[]=es6.modules'],
exclude: /node_modules/,
}, {
test: /\.scss$/,
loader: 'css?localIdentName=[path]!postcss-loader!sass',
}],
},
postcss: function() {
return [autoprefixer({
browsers: ['last 2 versions', 'safari 5', 'ie 9', 'ios 6', 'android 4']
}), csswring];
},
};
================================================
FILE: webpack/prod.config.js
================================================
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer');
var csswring = require('csswring');
module.exports = {
devtool: 'source-map',
entry: [
'./src/',
],
output: {
library: 'react-parallax-component',
libraryTarget: 'umd',
filename: '../dist/index.min.js',
path: __dirname,
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
},
__DEVELOPMENT__: false,
}),
new ExtractTextPlugin('bundle.css'),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
}),
],
resolve: {
extensions: ['', '.jsx', '.js', '.json'],
modulesDirectories: ['node_modules', 'src'],
},
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel?stage=0&loose[]=es6.modules'],
exclude: /node_modules/,
}, {
test: /\.scss$/,
loader: 'css?localIdentName=[path]!postcss-loader!sass',
}],
},
postcss: function() {
return [autoprefixer({ browsers: ['last 2 versions', 'safari 5', 'ie 9', 'ios 6', 'android 4'] }), csswring];
},
};