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

• react-parallax-tilt

  3 905 9.6 TypeScript

  👀 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

  109 11,784 9.8 TypeScript

  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

  surveyjs.io sponsored

  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.

  

• framer/motion

  43 22,054 9.8 TypeScript

  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

  787 64,769 9.9 TypeScript

  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

  55 19,954 7.8 JavaScript

  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

  1 2 7.5 TypeScript

  A Performant Customizable Tilt Component for React

NPM.js Main Demo Control Element Demo Storybook GitHub Repository

• react-flip-tilt

  1 0 6.6 TypeScript

  A Performant Customizable React Component Providing the Flip-Tilt Effect

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

• InfluxDB

  www.influxdata.com sponsored

  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.

  

• storybook

  321 82,810 10.0 TypeScript

  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

  379 61,568 9.9 TypeScript

  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

  67 14,742 9.3 JavaScript

  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

  473 43,581 9.5 TypeScript

  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

  3 3,781 0.0 JavaScript

  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

  123 8,680 10.0 Markdown

  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

Suggest a related project