DailyJS

Relae, ClassNameBuilder

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

libraries dom react browser

Relae, ClassNameBuilder

Posted by Alex R. Young on .
Featured

libraries dom react browser

Relae, ClassNameBuilder

Posted by Alex R. Young on .

Relae

Relä (GitHub: joakimbeng/relae, License: MIT, npm: relae) by Joakim Carlstein is a library for fetching data from RESTful servers using React components. It can fetch data from a base URL, but can also filter data.

If you've already injected JSON into the initial page load, then you can bootstrap it with Relae.bootstrap(data).

To use Relä, you need to wrap a React component with Relae.createContainer. This is where you pass the REST API URL and filtering options:

Relae.createContainer(YourComponent, relaeOptions);  

This project is based on React Relay -- you can compare the API from the Relay Newsfeed blog post. The author has planned more features, but has already implemented some cool stuff like caching.

ClassNameBuilder

If you find yourself generating lists of class names (often done in React projects), then have you ever wondered if there's a better way to do it? Luke William Westby has a suggestion: ClassNameBuilder (GitHub: lukewestby/class-name-builder, License: MIT, npm: class-name-builder). This library offers a chainable API for manipulating class name strings. It supports conditional expressions and merging instances together:

const classNames = ClassNameBuilder  
  .create()
  .always('example awesome-example')
  .if(condition, 'condition')
  .if(otherCondition, 'other-condition')
  .else(['not-other-condition', 'array'])
  .toString();

I'd usually do something like this with fragmentary bits of strings and logic. The advantage of this API is encapsulating the treatment of class names to generate more consistent output.