PropTypes

PropTypes are the React mechanism for defining what values a React component prop will accept. Because Socialstack's admin panel has a visual mechanism for adding components and there are a variety of convenience features for selecting values, Socialstack extends PropTypes and typically uses them a little differently. Fundamentally though, the propType value is a valid type accepted by <Input>.

PropTypes example

When you generate a UI module, you'll get the following as a commented out example (but with Entities swapped out with the name of your component):

Entities.propTypes = {
	title: 'string', // text input
	size: [1,2,3,4], // dropdowns
	width: [ // dropdown with separate labels/values
		{ name: '1/12', value: 1 },
		{ name: '2/12', value: 2 },
		{ name: '3/12 (25%)', value: 3 },
		{ name: '4/12 (33%)', value: 4 },
		{ name: '5/12', value: 5 },
		{ name: '6/12 (50%)', value: 6 },
		{ name: '7/12', value: 7 },
		{ name: '8/12 (66%)', value: 8 },
		{ name: '9/12 (75%)', value: 9 },
		{ name: '10/12', value: 10 },
		{ name: '11/12', value: 11 },
		{ name: '12/12 (100%)', value: 12 }
	],

	// alternatively, specify property parameters on a more granular level
	scrolledBackgroundColor: {
        type: 'color',
        label: 'Background colour (when scrolled)', // optional replacement label
        help: 'Default background colour when page has been scrolled', // optional help text to be shown along with the field (default position is between the label and field)
        helpPosition: 'icon', // help text position can be set on a per-field basis by including helpPosition (above, below or icon - with icon, the help text is hidden as alt text on an info icon displayed alongside the field)
        placeholder: 'Select a colour' // by default, placeholder inherits the default value (if any) - set here to override this if necessary
    },	

	// All <Input type='x' /> values are supported - checkbox, color etc.
	// Also the special id type which can be used to select some other piece of content (by entity name), like this:
	templateToUse: {type: 'id', content: 'Template'}
};

So long as propTypes simply exists - it can be an empty object - the admin panel will believe your component is addable via the visual UI.

Valid values

• Anything that <Input> accepts as a type. This can vary from project to project because it'll depend if you have installed custom input types or not, such as type="html".

Entities.propTypes = {
    description: 'text', // or, more commonly, string (alias)
    background: 'color',
    isActive: 'checkbox' // or bool (alias)
};

• Specifying an object will allow you to set all prop values on <Input> including any custom ones used by custom input types. Everything in the object is passed as a prop and in turn <Input> will forward it to your custom input type. Here we're setting some of the other default props on <Input>:

Entities.propTypes = {
    scrolledBackgroundColor: {
        type: 'color',
        label: 'Background colour (when scrolled)', // optional replacement label
        help: 'Default background colour when page has been scrolled', // optional help text to be shown along with the field (default position is between the label and field)
        helpPosition: 'icon', // help text position can be set on a per-field basis by including helpPosition (above, below or icon - with icon, the help text is hidden as alt text on an info icon displayed alongside the field)
        placeholder: 'Select a colour' // by default, placeholder inherits the default value (if any) - set here to override this if necessary
    }
};

• An array of values, which will generate a dropdown.

Entities.propTypes = {
    size: [1,2,3,4], // dropdowns
};

• An array of objects, which will generate a dropdown with custom labels.

Entities.propTypes = {
    width: [ // dropdown with separate labels/values
		{ name: '1/12', value: 1 },
		{ name: '2/12', value: 2 },
		{ name: '3/12 (25%)', value: 3 },
		{ name: '4/12 (33%)', value: 4 },
		{ name: '5/12', value: 5 },
		{ name: '6/12 (50%)', value: 6 },
		{ name: '7/12', value: 7 },
		{ name: '8/12 (66%)', value: 8 },
		{ name: '9/12 (75%)', value: 9 },
		{ name: '10/12', value: 10 },
		{ name: '11/12', value: 11 },
		{ name: '12/12 (100%)', value: 12 }
	]
};

• An object indicating a type and id will create a selector for that content type.

Entities.propTypes = {
    templateToUse: {type: 'id', content: 'Template'}
};