React-fade: Proof of Concept react fade in/out that just works without any effort

Last update: May 17, 2022

react-fade

Proof of Concept react fade in/out that just works without any effort.

Inspired by react native layout animations.

How it works

  • FadeIn
    • nothing special,
    • Starts as FadeIn state and change it to Normal after 1 tick. So, browser will automatically make a transition for it.
  • FadeOut:
    • Here's the trick. Prevents elements from being deleted on unmount and wait for fully(in this case, just waits 500ms) disappeared.
    • Please see
interface MessagesProps {
  messages: string[];
  onRemoveMessage: (x: string) => void;
}
const Messages = ({ messages, onRemoveMessage }: MessagesProps) => {
  return (
    <div>
      {messages.map((x) => (
        <MessageBubble key={x}>
          {x} <button onClick={() => onRemoveMessage(x)}>X</button>
        </MessageBubble>
      ))}
    </div>
  );
};

const MessageBubble = styled(FadeDiv)`
  opacity: 1;

  &.fadeIn {
    opacity: 0;
  }
  &.fadeOut {
    opacity: 0;
  }
`;

GitHub

https://github.com/pjc0247/react-fade
You might also like...

:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!

:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!

react-universal-hooks React Universal Hooks : just use****** everywhere. Support React = 16.8.0 Installation Using npm: $ npm install --save react-un

Aug 1, 2022

Just a simple react iota prototype to send messages to the tangle through a web app

Just a simple react iota prototype to send messages to the tangle through a web app

REACT IOTA This is a test project of mine to get familiar with the iota.js library. The WebApp is build with react and let you send messages to the ta

Jun 10, 2021

A React JS project to make age and gender prediction using Agify.io and Genderize.io. Only for practice use and just for fun~

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 29, 2022

Just a small collection of hooks that make it easy to integrate React Query into a REST API

react-query-restful is just a small collection of hooks that make it easy to integrate React Query into a REST API.

May 7, 2022

Description So you want to make a difference in the world. You definitely want to do more than just sign a petition

Description So you want to make a difference in the world. You definitely want to do more than just sign a petition

peticipate Description So you want to make a difference in the world. You definitely want to do more than just sign a petition. You have some awesome

Dec 7, 2021

⚛️ Deliver UI for Web and Mobile platforms without taking care about complexity on how to style there, learn React once and code everywhere

⚛️  Deliver UI for Web and Mobile platforms without taking care about complexity on how to style there, learn React once and code everywhere

SkynexUI Use the platform, don't care about how to style there ⚠️ Version 1.x.x is alpha, trust only in v2 A set of components writen on top of React

Jul 31, 2022

A description of the conceptual model of React without implementation burden.

React - Basic Theoretical Concepts This document is my attempt to formally explain my mental model of React. The intention is to describe this in term

Jul 31, 2022

😎 Check if your react component are visible on the screen without pain and with performance in mind

😎 Check if your react component are visible on the screen without pain and with performance in mind

React on screen 😎 Check if your react component are visible on the screen without pain and with performance in mind 😎 ! React on screen Demo Install

Jul 24, 2022

A React component that can virtualise lists and any set of children.

A list virtualiser that can create virtual rows out of arrays or a total count, or virtualise an arbitrary set of React components.

May 3, 2022
This is a proof of concept of an NFT vending machine built using Solana Pay, Metaplex, Phantom Mobile, and Next.js

Solana NFT Vending Machine This is a proof of concept of an NFT vending machine built using Solana Pay, Metaplex, Phantom Mobile, and Next.js. This wa

Jul 4, 2022
This is used for minting NFTs and getting metadata , token owner, wallet address assigned to an NFT, just check it out and enjoy

nft-minter A Heroku web server to easily mint non-fungible tokens via an API Example Configuration: Blockchain: Ethereum Testnet: Rinkeby Contract: ER

Apr 17, 2022
React Backbone Binding that works with React 16

WithBackbone React Higher Order Component which will bind Backbone Data that works with React Fiber (v.16) Why did we make it There are already a coup

Mar 19, 2021
React Clone - How React Works: An In-Depth Guide
React Clone - How React Works: An In-Depth Guide

Как работает React: подробное руководство Привет, друзья! В этой статье я покажу вам, с чего начинается React. Что это означает? Это означает, что мы

Nov 25, 2021
HTML meta tags for React-based apps. Works for both client- and server-side rendering, and has a strict but flexible API.

React Document Meta HTML meta tags for React-based apps. Works for both client- and server-side rendering, and has a strict but flexible API. Built wi

Jun 14, 2022
⚛ A reCAPTCHA bridge for React that works.
⚛ A reCAPTCHA bridge for React that works.

reCAPTCHA for React A reCAPTCHA library for React that works. Looking for React Native version? Install Install the module yarn add react-recaptcha-

Mar 4, 2022
Write down a shell command-line to see how it works in details.

shell.how Write down a shell command-line to see how it works in details. Design Stack TypeScript Next.js Tailwind CSS Recoil for state management, it

Jul 16, 2022
Maps out days defined by 12 hours of sunlight, as described by XKCD 2542.
Maps out days defined by 12 hours of sunlight, as described by XKCD 2542.

Daylight maps (XKCD 2542) © Randall Monroe, 2021 Daylight calendar, where every 12 hours of sun gives you a freshly minted day! These are maps showing

Nov 29, 2021
Settings - Simple settings module for kernel with an API out of the box

Kernel Settings Simple settings module for kernel with an API out of the box. In

Aug 2, 2022