1.3.1 • Published 5 years ago

react-universal-tilt v1.3.1

Weekly downloads
36
License
MIT
Repository
github
Last release
5 years ago

react-universal-tilt

NPM version NPM downloads

universal-tilt.js implementation for React component

Demo

See plugin in action

How to Use

First, install the library in your project by npm:

$ npm install react-universal-tilt

Or Yarn:

$ yarn add react-universal-tilt

Getting Started

• Import plugin in React application file:

import ReactTilt from 'react-universal-tilt';

• Later create parallax component and pass options:

<ReactTilt
  settings={ /* settings */ }
  callbacks={ /* callbacks */ }
  className={ /* class name(s) */ }
  tiltChange={ /* event output destination */ }
  // other props for div tag e.g. style
/>

You can add components with or without additional content:

with:

<ReactTilt /* options */>
  // additional content
</ReactTilt>

without:

<ReactTilt /* options */ />

Props

NameTypeDefaultDescriptionAvailable options
settingsobject{}Default universal-tilt.js settingsuniversal-tilt.js settings
callbacksobject{}Default universal-tilt.js callbacksuniversal-tilt.js settings
classNamestringtiltTilt element class nameName of tilt element

Event

tiltChange event will output the x, y & angle of tilting

Examples

import React, { Component } from 'react';
import ReactTilt from 'react-universal-tilt';

/* ------ First Example ------ */

export class FirstExample extends Component {
  render() {
    return (
      <ReactTilt
        settings={{
          base: 'window',
          reverse: true
        }}

        style={{
          'border': '1px solid #333'
        }}

        className="tilt-elem my-tilt"
      />
    );
  }
}

/* ------ Second Example ------ */

function myFunc(el) {
  el.style.backgroundColor = '#f00';
}

export class SecondExample extends Component {
  output(e) {
    console.log(e.tiltX, e.tiltY, e.angle);
  }

  render() {
    const style = {
      'border': '1px solid #333'
    };

    return (
      <ReactTilt
        settings={{
          speed: 500,
          scale: 1.3
        }}

        callbacks={{
          onMouseMove: el => myFunc(el)
        }}

        style={style}

        className="tilt-elem my-tilt"

        tiltChange={this.output}
      >
        <h3>Hello World!</h3>
      </ReactTilt>
    );
  }
}

License

This project is licensed under the MIT License © 2018-present Jakub Biesiada

1.3.1

5 years ago

1.3.0

5 years ago

1.3.0-beta.2

5 years ago

1.3.0-beta.1

5 years ago

1.2.0

5 years ago

1.2.0-beta.2

5 years ago

1.2.0-beta.1

5 years ago

1.1.4

5 years ago

1.1.3

5 years ago

1.1.3-beta.1

5 years ago

1.1.2

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.10

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

1.0.0-beta.1

6 years ago