DailyJS

FluxThis Router, React Transitive Number

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

ui react ES6 libraries

FluxThis Router, React Transitive Number

Posted by Alex R. Young on .
Featured

ui react ES6 libraries

FluxThis Router, React Transitive Number

Posted by Alex R. Young on .

FluxThis ES6 Router

Josh Horwitz wrote in to say that FluxThis has a new router that takes advantage of ES6 syntax. It has an API that is inspired by Koa for defining routes with middleware that drops through a stack using the yield statement:

export default function (router) {  
  router.use(function *(next) {
    // do some stuff
    yield *next;
    // do some stuff after everyone else
  });

  router.all('/user*', function *userAuthHandler(next) {
    document.title = 'User Profile';

    // perhaps do some authentication stuff?
    if (authFails()) {
      this.rewriteTo('/notAuthorized);
      return; // short circuit the middleware chain
    }

    yield *next;
  });
}

The idea is to use middleware without using deeply nested callbacks, which the generator syntax seems to solve quite nicely.

FluxThis is a Flux implementation by the developers at AddThis.

react-transitive-number

react-transitive-number (GitHub: Lapple/react-transitive-number, License: MIT, npm: react-transitive-number) by Aziz Yuldoshev is a React component that transforms numbers into stateful counters with animations. The author has a demo that compares plain HTML with the TransitiveNumber version.

To use it, just wrap a number with a <TransitiveNumber> component. The animation looks like a tumbler from an old clock, and apparently it was inspired by Groupon's old countdown timers.