80.229.4.125: /* Valid values */

2024-04-30T11:54:14Z

Valid values

← Older revision		Revision as of 11:54, 30 April 2024
Line 101:		Line 101:
	Entities.propTypes = {		Entities.propTypes = {
	templateToUse: {type: 'id', content: 'Template'}		templateToUse: {type: 'id', content: 'Template'}
			};
			</syntaxhighlight>


			* An object indicating an array type and entity will create a multi selector for that [[Entities\|content type]].

			<syntaxhighlight lang="js">
			Entities.propTypes = {
			tags: {type: 'array', content: 'tag'}
	};		};
	</syntaxhighlight>		</syntaxhighlight>

Luke: /* PropTypes example */

2022-12-01T12:35:37Z

PropTypes example

← Older revision		Revision as of 12:35, 1 December 2022
Line 3:		Line 3:
	= PropTypes example =		= 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):		When you [[Generate\|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):

	<syntaxhighlight lang="js">		<syntaxhighlight lang="js">

Luke: Created page with "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 a..."

2022-12-01T12:35:19Z

Created page with "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 a..."

New page

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):

<syntaxhighlight lang="js">
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'}
};
</syntaxhighlight>

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 [[Html Fields|type="html"]].

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

* 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>:

<syntaxhighlight lang="js">
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
}
};
</syntaxhighlight>

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

<syntaxhighlight lang="js">
Entities.propTypes = {
size: [1,2,3,4], // dropdowns
};
</syntaxhighlight>

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

<syntaxhighlight lang="js">
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 }
]
};
</syntaxhighlight>

* An object indicating a type and id will create a selector for that [[Entities|content type]].

<syntaxhighlight lang="js">
Entities.propTypes = {
templateToUse: {type: 'id', content: 'Template'}
};
</syntaxhighlight>

PropTypes - Revision history

80.229.4.125: /* Valid values */

Luke: /* PropTypes example */

Luke: Created page with "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 a..."