"react-next-tilt" and "react-flip-tilt" NPM Packages

This page summarizes the projects mentioned and recommended in the original post on dev.to

SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
featured
InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
  • react-parallax-tilt

    👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB)

  • At this point, I was already using a tilt component (react-parallax-tilt) in my portfolio, and after checking this page I had the general idea of how it should be done, a container with transform-style: preserve-3d, with two children, one tilt and the other an image, both having backface-visibility: hidden and the tilt being rotated to face backward at the start. For the animation, I decided to use framer-motion because I was already familiar with it and knew it had what was needed to get the job done (and I'm glad I did because later I needed to await the animation and it was easy with framer-motion).

  • vitest

    Next generation testing framework powered by Vite.

  • The most popular library for testing React components is the React Testing Library and I started learning it. because I was using Vite.js for development, I had to set up and use Vitest instead of Jest which I did without much trouble since Vitest is made on top of Jest and has a similar syntax.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • framer/motion

    Open source, production-ready animation and gesture library for React

  • At this point, I was already using a tilt component (react-parallax-tilt) in my portfolio, and after checking this page I had the general idea of how it should be done, a container with transform-style: preserve-3d, with two children, one tilt and the other an image, both having backface-visibility: hidden and the tilt being rotated to face backward at the start. For the animation, I decided to use framer-motion because I was already familiar with it and knew it had what was needed to get the job done (and I'm glad I did because later I needed to await the animation and it was easy with framer-motion).

  • vite

    Next generation frontend tooling. It's fast!

  • The most popular library for testing React components is the React Testing Library and I started learning it. because I was using Vite.js for development, I had to set up and use Vitest instead of Jest which I did without much trouble since Vitest is made on top of Jest and has a similar syntax.

  • jsdom

    A JavaScript implementation of various web standards, for use with Node.js

  • React testing library uses jsdom (or others like happy-dom) under the hood to emulate the browser environment and enable testing of different properties. but it doesn't render the component in an actual browser meaning the styles can't be computed and the returned computed style is just an object with the correct keys but empty strings as values.

  • react-next-tilt

    A Performant Customizable Tilt Component for React

  • NPM.js Main Demo Control Element Demo Storybook GitHub Repository

  • react-flip-tilt

    A Performant Customizable React Component Providing the Flip-Tilt Effect

  • NPM.js Main Demo Parallax Demo Control Element Demo Storybook GitHub Repository

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • storybook

    Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.

  • Storybook was another tool/library on my "to learn" list. It provides an environment where you can render your component in different states and with different props (a story) and preview, test, or play around with it. it's also good for showcasing/documenting different features of a component and the effect of changing individual props on how the component looks and behaves.

  • Playwright

    Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.

  • The solution was to use a testing method that actually rendered the component in a browser so I had access to the computed styles. two of the most used testing libraries for this purpose are Cypress and Selenium. I decided on Cypress (while reading on Reddit that they both suck and we should use playwright instead...) and started learning it.

  • JSDoc

    An API documentation generator for JavaScript.

  • I was already familiar with JSDoc from writing prop descriptions for my previous NPM packages, but I decided to go all in and provide more/better descriptions. I added the following information for the props of both components:

  • jest

    Delightful JavaScript Testing.

  • I knew Jest from before when I learned it to write the tests for my previous NPM packages. but at this point even though it was on my "to learn" list, I didn't know how to write tests for React components.

  • tilt.js

    A tiny 60+fps parallax tilt hover effect for jQuery.

  • Most of the other tilt components seem to be based on tilt.js. while taking a look at it, I noticed that it boasts about being "requestAnimationFrame powered". this piqued my interest and I started looking at what it is and how to implement it in my component.

  • content

    The content behind MDN Web Docs

  • Link to a relevant source for more information which can be a demo page, storybook page, or a website like MDN

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • AsciidocFX: The Asciidoc Editor for documentation and authoring

    3 projects | dev.to | 2 May 2024
  • Here are the 10 projects I am contributing to over the next 6 months. Share yours

    13 projects | dev.to | 13 Apr 2024
  • StackOverflow alternatives for web developers

    6 projects | dev.to | 27 Sep 2023
  • 10 repositories to star if you are a Javascript developer

    10 projects | dev.to | 8 Mar 2023
  • What new CSS and JavaScript features can we expect soon? Or is it all unexpected?

    9 projects | dev.to | 3 Mar 2023