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
  }
}