How to use the skatejs.props.string function in skatejs

self.toggleSearch();
    });
    window.addEventListener('message', this.receiveIframeMessage, false);
  }

  _stateChanged(state) {
    // throw new Error('_stateChanged() not implemented', this);
    this.triggerUpdate();
  }

  rendered() {
    this.inputElement = this.querySelector('.js-c-typeahead__input');
  }

  static props = {
    maxResults: props.string,
    placeholder: props.string,
    hideClearButton: props.boolean,
    clearButtonText: props.string,
  };

  onInput = e => {
    const value = e.target.value;

    this.setState({
      value: value,
    });

    this.onSuggestionsFetchRequested({ value }); // re-render search results immediately based on latest input value
  };

  toggleSearch() {

return vueProp.default
    }

    for ( const key in vueProps ) {
        const prop = vueProps[ key ]
        const defaultVal = getDefault(prop)

        if ( prop.type === null ) {
            result[ key ] = skatePropTypes.any
            warn()
            console.warn('vue-web-component: You did not specify a prop type for the attribute mentioned in the previous warning. Any values for this attribute will be passed as a string value to the Vue component.')
        }
        else if ( prop.type === Number )
            result[ key ] = Object.assign({}, skatePropTypes.number, {default:defaultVal})
        else if ( prop.type === String )
            result[ key ] = Object.assign({}, skatePropTypes.string, {default:defaultVal})
        else if ( prop.type === Boolean )
            result[ key ] = Object.assign({}, skatePropTypes.boolean, {default:defaultVal})
        else if ( prop.type === Object )
            result[ key ] = Object.assign({}, skatePropTypes.object, {default:defaultVal})
        else if ( prop.type === Array )
            result[ key ] = Object.assign({}, skatePropTypes.array, {default:defaultVal})
        else {
            result[ key ] = skatePropTypes.any
            warn()
            console.warn('vue-web-component: You specified a type in your Vue component that is currently is not supported by vue-web-component. Any values for the attribute mentioned in the previous warning will be passed as string value to the Vue component.')
        }

    }

    return result

import { props, withComponent } from 'skatejs';
import withReact from '@skatejs/renderer-react';
import React from 'react';

class WithReact extends withComponent(withReact()) {
  static props = {
    name: props.string
  };
  render({ name }) {
    return <span>Hello, {name}!</span>;
  }
}

customElements.define('with-react', WithReact);

static get props() {
    return {
      name: props.string
    };
  }
  updated() {

/** @jsx h */

const { Component, define, h, props } = require("skatejs");

module.exports = define(
  class NotFound extends Component {
    static props = {
      page: props.string
    };
    renderCallback({ page }) {
      return (
        <div>
          <h1>Page not found</h1>
          <p>
            The page <strong>{page}</strong> could not be found.
          </p>
        </div>
      );
    }
  }
);

class Namecard extends withComponent() {
  render() {
    return outdent`
      
        <h1></h1>
        
      
    `;
  }
}

class Nametag extends withComponent() {
  static props = {
    name: { ...props.string, default: 'John Doe' },
    description: { ...props.string, default: 'Web Components enthusiast' }
  };
  render({ name, description }) {
    return `
      
        <p slot="description">${description}</p>
        <strong slot="name">${name}</strong>
      
    `;
  }
}

class Slant extends HTMLElement {
  static is = 'x-slant';
  connectedCallback() {
    const slot = document.createElement('slot');
    const em = document.createElement('em');

constructor(self) {
    self = super(self);
    return self;
  }

  connected() {
    const state = store.getState();
    this.theme = this.theme || state.app.themeMode || 'dark';
  }

  static props = {
    ratio: props.string,
    theme: props.string,
    url: props.string,
    text: props.string,
    altText: props.string,
    srcLight: props.string,
    srcDark: props.string,
  };

  render() {
    const imageSrc = this.theme === 'dark' ? this.srcDark : this.srcLight;

    return html`
      <a class="pl-c-logo" href="${this.props.url === '' ? undefined : this.props.url}">
        </a>

static get props() {
    return {
      name: props.string
    };
  }
  render({ name }) {

<h1>
            
          </h1>
          
            
          
        
      );
    }
  }
);

module.exports = define(
  class extends Component {
    static props = {
      name: { ...props.string, default: "John Doe" },
      description: { ...props.string, default: "Web Components enthusiast" }
    };
    renderCallback({ name, description }) {
      return (
        
          <p>
            {description}
          </p>
          <strong>
            {name}
          </strong>
        
      );
    }
  }
);

static get props() {
    return {
      name: props.string
    };
  }
  render({ name }) {