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
<ParallaxComponent
speed="0.003"
width="300"
top="40%"
left="100"
>
<div>
Children component
</div>
</ParallaxComponent>
```
### 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
================================================
<html>
<head>
<meta charset="utf-8">
<title>React Parallax Component Examples</title>
</head>
<body>
<div id="react-parallax-component-example"></div>
<a
href="https://github.com/keske/react-parallax-component"
style="
position: fixed;
top: 20px;
right: 20px;
"
>
How to use
</a>
</body>
<script src="dist/bundle.js"></script>
</html>
================================================
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 (
<div
className={styles}
style={wrap}
>
{
WORD.split('').map((letter, index) =>
<ParallaxComponent
speed={random(0, 0.1) * ((random(0, 2) > 1) ? 1 : -1)}
top="40%"
left={(index + 1) * 80}
key={index}
>
<span className="letter">
{letter}
</span>
</ParallaxComponent>
)
}
</div>
);
}
}
ReactDOM.render(
<ExamplePage />,
document.getElementById('react-parallax-component-example')
);
================================================
FILE: src/example/styles/index.js
================================================
import 'style!./styles.scss';
export default require('./styles.scss').locals.styles;
================================================
FILE: src/example/styles/styles.scss
================================================
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,400italic,300italic&subset=latin,cyrillic-ext);
:local(.styles) {
position: relative;
span.letter {
font-size: 60px;
font-weight: 600;
font-family: 'Open Sans', sans-serif;
text-align: center;
width: 80px;
display: inline-block;
}
}
================================================
FILE: src/index.js
================================================
import React, { Component } from 'react';
import throttle from 'lodash.throttle';
// Component styles
import styles from './styles';
export default class ParallaxComponent extends Component {
static propTypes = {
children: React.PropTypes.node.isRequired,
speed: React.PropTypes.number,
// Style
style: React.PropTypes.object,
className: React.PropTypes.string,
width: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
]),
height: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
]),
top: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
]),
left: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
]),
right: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
]),
}
static defaultProps = {
width: 'auto',
height: 'auto',
top: 'inherit',
left: 'inherit',
right: 'inherit',
speed: -0.03,
}
constructor(props) {
super(props);
this.handleScroll = throttle(this.handleScroll.bind(this), 10);
this.parallaxElement;
}
componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
this.handleScroll();
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
}
getTop() {
const { top = 0 } = this.props;
const topString = top + '';
return topString.indexOf('%') > -1
? window.innerHeight * (topString.replace('%', '') / 100)
: parseInt(top, 10);
}
handleScroll() {
const { speed } = this.props;
const top = this.getTop();
// Top positons
const pageTop = window.pageYOffset;
const newTop = (top - (pageTop * speed));
// Set new top position
this.parallaxElement.style.top = `${newTop}px`;
}
render() {
const { width, height, left, right, top, speed, style, children, className, ...rest } = this.props;
const ownStyle = {
width,
height,
left,
right,
};
return (
<div
className={`${styles} ${className}`}
ref={ref => this.parallaxElement = ref}
style={{ ...style, ...ownStyle }}
{...rest}
>
{children}
</div>
);
}
}
================================================
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];
},
};
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
SYMBOL INDEX (10 symbols across 2 files)
FILE: src/example/index.js
constant WORD (line 10) | const WORD = 'AWESOME REACT';
class ExamplePage (line 13) | class ExamplePage extends Component {
method render (line 14) | render() {
FILE: src/index.js
class ParallaxComponent (line 7) | class ParallaxComponent extends Component {
method constructor (line 47) | constructor(props) {
method componentDidMount (line 54) | componentDidMount() {
method componentWillUnmount (line 59) | componentWillUnmount() {
method getTop (line 63) | getTop() {
method handleScroll (line 72) | handleScroll() {
method render (line 85) | render() {
Condensed preview — 15 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (14K chars).
[
{
"path": ".eslintrc",
"chars": 764,
"preview": "{\n \"parser\": \"babel-eslint\",\n \"extends\": \"airbnb\",\n \"env\": {\n \"browser\": true,\n \"node\": true,\n \"mocha\": true"
},
{
"path": ".gitignore",
"chars": 1017,
"preview": "# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio\n\n*.iml\n\n## Directory-base"
},
{
"path": "README.md",
"chars": 1092,
"preview": "# React Parallax Component\n\nEasiest way to add scroll parallax effect on the component.\n\n![image](https://raw.githubuser"
},
{
"path": "index.html",
"chars": 385,
"preview": "<html>\n\n<head>\n <meta charset=\"utf-8\">\n <title>React Parallax Component Examples</title>\n</head>\n\n<body>\n <div id=\"re"
},
{
"path": "index.js",
"chars": 92,
"preview": "var ParallaxComponent = require('./dist/index.min.js');\nmodule.exports = ParallaxComponent;\n"
},
{
"path": "package.json",
"chars": 1539,
"preview": "{\n \"name\": \"react-parallax-component\",\n \"version\": \"1.0.6\",\n \"description\": \"Easiest way to add scroll parallax effec"
},
{
"path": "server.js",
"chars": 981,
"preview": "var http = require('http');\nvar express = require('express');\nvar app = express();\n\napp.use(require('morgan')('short'));"
},
{
"path": "src/example/index.js",
"chars": 1012,
"preview": "import React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\n\n// Lib\nimport ParallaxComponent from '../';"
},
{
"path": "src/example/styles/index.js",
"chars": 85,
"preview": "import 'style!./styles.scss';\nexport default require('./styles.scss').locals.styles;\n"
},
{
"path": "src/example/styles/styles.scss",
"chars": 343,
"preview": "@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,400italic,300italic&subset=latin,cyrillic-"
},
{
"path": "src/index.js",
"chars": 2349,
"preview": "import React, { Component } from 'react';\nimport throttle from 'lodash.throttle';\n\n// Component styles\nimport styles fro"
},
{
"path": "src/styles/index.js",
"chars": 85,
"preview": "import 'style!./styles.scss';\nexport default require('./styles.scss').locals.styles;\n"
},
{
"path": "src/styles/styles.scss",
"chars": 69,
"preview": ":local(.styles) {\n position: fixed;\n\n img {\n width: 100%;\n }\n}\n"
},
{
"path": "webpack/dev.config.js",
"chars": 1245,
"preview": "var path = require('path');\nvar webpack = require('webpack');\nvar ExtractTextPlugin = require('extract-text-webpack-plug"
},
{
"path": "webpack/prod.config.js",
"chars": 1328,
"preview": "var path = require('path');\nvar webpack = require('webpack');\nvar ExtractTextPlugin = require('extract-text-webpack-plug"
}
]
About this extraction
This page contains the full source code of the keske/react-parallax-component GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 15 files (12.1 KB), approximately 3.8k tokens, and a symbol index with 10 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.