Plop and Selectize

Plop (GitHub: amwmedia/plop, License: MIT, npm: plop)

Plop is a command line tool that helps you introduce uniformity to your team by generating new modules, files or even documentation pages. The problem it tries to solve is one that we all must have. You have a project which is nicely structured. Lets say this is our pages folder;

|-- Pages
    |-- HomePage
        |-- HomePage.jsx
        |-- config.json
        |-- styles.css

What we need to do is add a new page. Normally we would do is copy the HomePage folder and walk through the files and what is needed. This will cost you some time and slow you down.

Plop to the rescue

By defining how modules, pages or components should look before hand you could write a template for it. By using handlebars it lets you set the values you would normally change by hand.

Here is an example template file

class {{ properCase name }} extends React.Component {
  render(){
    return <div className='{{ name }}'>Newly generated Component {{ name }}</div>
  }
}

To fill up this template I will need a plopfile which would look like this

module.exports = function (plop) {
    plop.setGenerator('component', {
        description: 'Generate a React Component',
        prompts: [{
            type: 'input',
            name: 'name',
            message: 'What should it be called?',
            validate: function (value) {
                if ((/.+/).test(value)) { return true; }
                return 'name is required';
            }
        }],
        actions: [{
            type: 'add',
            path: 'src/Components/{{properCase name}}.jsx',
            templateFile: 'component.txt'
        }]
    });
}

Now you could call plop to select it from a list of generators or plop <generator> to call it directly.

What I love about this tool is the size of it. In contrast with Yeoman which is great for initialization of a codebase but after that you are still copying files, Plop is designed to work in throughout the life entire cycle of a project.

React Selectize

React Selectize (GitHub: furqanZafar/react-selectize, License: Apache 2.0, npm: react-selectize)

React Selectize is a stateless Select component for ReactJS, which provides a platform for a more developer friendly SimpleSelect & MultiSelect component.

Getting it to work was surprisingly simple. Here is my example

import React from 'react';
import ReactSelectize from 'react-selectize'
const SimpleSelect = React.createFactory(ReactSelectize.SimpleSelect);
const MultiSelect = React.createFactory(ReactSelectize.MultiSelect);

<SimpleSelect
    placeholder = "Select a food"
    onValueChange = {(value, callback) => {
        alert(value);
        callback();
    }}
    >
    <option value = "pizza">pizza</option>
    <option value = "kebab">kebab</option>
    <option value = "donut">donut</option>
</SimpleSelect>

<MultiSelect
    placeholder = "Select foods"
    options = ["pizza", "kebab", "donut"].map(function(food){
        return {label: food, value: food};
    });
    onValuesChange = {function(values, callback){
        alert(values);
        callback();
    }}
/>

What I love about this component is the ease of the setup and the flexibility and compactness of the API.