JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<script id='template' type='text/ractive'>
    <div>
        <p>{{message}}</p>
        <p>inputkey: {{inputkey? inputkey : "undefined"}}</p>
        <p>inputKey: {{inputKey ? inputKey : "undefined"}}</p>
    </div>
</script>

<script id='container' type='text/ractive'>
    <widget message='Click to activate!' inputKey='someValue' />
</script>

JavaScript

var MyWidget = Ractive.extend({
    template:'#template',
    beforeInit: function(options) {
			options.magic = true;
		},
  init: function (options) {
      console.log('================');
      console.log('message:', options.data.message);
      // inputKey
      console.log('camelCase inputKey:', options.data.inputKey); // undefined
     // inputkey all lowercase
      console.log('lowercase inputkey:', options.data.inputkey); // someValue
      
      console.log('message:', this.data.message);
      // inputKey
      console.log('camelCase inputKey:', this.data.inputKey); // undefined
     // inputkey all lowercase
      console.log('lowercase inputkey:', this.data.inputkey); // someValue
  },
  data: {
    message: 'No message specified, using the default'
  }
});

var r = new Ractive({
    el: document.body,
    template:'#container',
    components: {
        widget: MyWidget
    }
})