• react
    ASP.NET Core,  CSS,  React,  SPA

    route transition for redux-little-router, react ASP.NET Core

    [crayon-661d8d1d983db391221332-i/] is a good client side routing library for project that uses [crayon-661d8d1d983e1572323009-i/] and [crayon-661d8d1d983e2633726839-i/]. However, adding transition to the route pages could be tricky. [crayon-661d8d1d983e3993945050-i/] provides a react component [crayon-661d8d1d983e4027756612-i/] for use to define the route pages. Each route page component will be wrapped by a [crayon-661d8d1d983e5495558803-i/] component. As far as I know (after looking at the coding), [crayon-661d8d1d983e6107226804-i/] component will render the route page…

  • react
    CSS,  Javascript

    Prevent body scrolling for safari/chrome

    Prevent body scrolling when showing modal dialog or popup with overlay. Any content in the background should not be moving. That’s because the user actions and experience should focus on the popup/dialog and any movement (scrolling) in the background could cause confusion. And it becomes more annoying when you try to scroll the content of the popup/dialog but ended up it’s…

  • react
    CSS,  React

    react route transition css: css-transitioner

    css-transitioner is a small footprint React wrapper component to enable react route transition (i.e. perform transition when changing route page). It works with client side routing to switch between pages. It all started out when we wanted to add transition to our page routing, instead of switching pages in a flash. However, we couldn’t find an easy way to make…