Props

You pass props as HTML attributes on the component and then get access to them inside your component's JavaScript with this.props.

Props must be defined using camel-case but set as kebab-case in HTML. Values are converted between Javascript types and HTML attributes.

Props are observed by default which means they react to changes and trigger re-renders.

<example-component class-name="a-class" required="true"></example-component>

You'll need to define your prop types in the component definition, like so:

props: { className: { type: String, default: 'btn', required: true, // is this required? observed: false // turn off observing changes to this prop }, required: { type: Boolean, default: false } }

The following properties are used to define props:

Instance properties

Prop values can be set on instances of components. Each prop you define for a component becomes an instance property and can be set using Javascript.

const exampleComponentInstance = document.querySelector('example-component') exampleComponentInstance.className = 'another-value'

Built-in props

FicusJS provides built-in props that are available on all components.

Prop types

There are a number of prop types available for use in components. These are defined in the type property of the prop definition.

String

props: { className: { type: String } }

Number

props: { count: { type: Number } }

Boolean

props: { required: { type: Boolean } }

Object

props: { options: { type: Object } }

Array

props: { items: { type: Array } }

Function

Functions can be passed as props. These cannot be passed using HTML attributes as they cannot be converted from strings. Functions can only be passed using instance properties.

props: { onClick: { type: Function } }