Custom PropType Validators

by Bradley Gore

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<main>
    <section class="component-output">
        <h3>Component Output</h3>
        <div id="component"></div>
    </section>
    <section class="validator-output">
        <h3>Validator Output</h3>
        <div id="output"></div>
    </section>
</main>

CSS

h3 {
    color: green;
    font-weight: bold;
    text-decoration: underline;
}

section {
    padding: 10px;
}

JavaScript

function numberValidator (props, propName, componentName) {
    if (isNaN(Number(props[propName]))) {
        return new Error(
            [ 
                componentName,
                'requires that',
                '"' + propName + '"',
                'be a Number.'
            ].join(' '));
    }
};

function requireableProp(testFn) {
    function testProp(props, propName, componentName) {

        var propVal = props[propName];
        var propIsEmpty = [undefined,null,''].indexOf(propVal) > -1;
        var isRequired = arguments.length > 3 && arguments[arguments.length-1] === true;
        var error;
        
        if (isRequired === true && propIsEmpty) {
            error = new Error([
                componentName,
                'requires that',
                '"' + propName + '"',
                'be populated'
            ].join(' '));
        } else if (!(!isRequired && propIsEmpty)) {
            error = testFn(props, propName, componentName);
        }
        
        if (error !== undefined) {
            //only posting output to show the errors generated
            var outputEl = document.getElementById('output');
            var errorDiv = outputEl.querySelector('#'+propName);
            if (errorDiv === null) {
                errorDiv = document.createElement('DIV');
                errorDiv.id = propName;                
                outputEl.appendChild(errorDiv);
            }
            
            errorDiv.innerText = error.message;
            return error;
        }
    }
    
    testProp.isRequired = function isRequiredProp() {
        Array.prototype.push.call(arguments, true);
        return testProp.apply(null, arguments);
    };

    return testProp;
}

var requireableNumber = requireableProp(numberValidator);

var testComponent = React.createClass({
    displayName: 'Test Component',
    propTypes: {
        number: requireableNumber, //NOT Required, valid if empty
        requiredNumber:...