Riot

Source file extensions: .riot

Riot.js is a simple and elegant component-based UI library

Stories

Riot components can be used in stories directly or through an object.

import Counter from './index.riot';

export const story1 = () => Counter;

export const story2 = () => ({
  Component: Counter,
  props: {
    count: 5,
  },
});

References

Riot.js

Quick example

index.riot

<my-component>
  <!-- Props in HTML -->
  <h3>{ props.title }</h3>

  <script>
    export default {
      onMounted() {
        // Props in JavaScript
        const title = this.props.title;

        // this.props is frozen and it's immutable
        this.props.description = 'my description'; // this will not work
      },
    };
  </script>
</my-component>