Quickreviews: Playroom

By Maxi |

playroom - version: 0.9.0

What are you?

playroom is a playground for your react components. Playroom lets you quickly mock a pages and compound components with your library of react components. You can see on real time the result of your designs in a canvas with different viewports.

How does it work?

playroom will read your components folder and will use that as a source of the playroom. Then, in a free text area you can already code your components and see it happen.

To be able to use this you need to install it and then throw a configuration file in the root of your project folder.

Then run a command to start playing with it.

Now quickreview!

Now is time for the truth! The approach and the "Zero" configurability of this library might be something that make it attractive.

I would say it is a lighter version of something such as a design system, with the lack of system.

You can check in the demo how nice is if you know upfront the name of all the components you are going to use.

Every time you change the snippet an encoded url is going to be created so you can share it with your colleagues.

Diving a little bit deeper

Standard package.json, with commitizen and semantic release that are pretty nice addition to ensure a tidy and organized history and release versioning.

Right front the package.json I can see the authors care about the community because this has linting/unit/integration/e2e testing. I'm really positive about this kind of setup for stable libraries.

Code wise, the library is very organized with pretty complex react components.

I have to say, that I can not analyze this react component in 30 mins to define if this is good or not. So far, I'd say it was well put together and the guys really knows about react.

Conclusion

Playroom is a tool which might be useful in certain scenarios where the developers prototype very often with its library because you need to have a good knowledge of the naming of your components. It might be a really good tool for example to template emails or something that make sense from the perspective of the developer.

Scores (higher is better)

  • Usefulness: 7/10.
  • Code quality: 8/10.
  • Documentation: 7/10.
  • Browser support: 6/10.
  • Potential: 7/10.

_Overall: 7/10

suggest changes
Join the Newsletter