Meiosis Documentation

Table of Contents

Using Lifecycle Methods, and Stateful/3rd Party Components

In this section, we look at using a virtual-DOM library's lifecycle methods, and stateful / 3rd party components. We'll look at two examples. Please jump to the section that you are interested in. If you are working with a different virtual-DOM library, either section should still be useful and easy to adapt to the library that you are using.

  1. React
  2. Mithril

React

Using lifecycle methods in React can be useful for using third-party components that are not designed to work with virtual-DOM libraries, but rather (for example) jQuery.

In this example, we are using this jQuery datepicker plugin.

Additionally, some third-party components are designed to work with React, but manage their own internal state using setState. It should not be a problem to use such components. Hopefully they provide a way to retrieve the relevant data out of the component. In our example, we'll write our own component as a proof of concept.

Looking at the example below, you will find EntryNumber, a component that uses React's setState to manage its internal state, and provides a hook to retrieve the entry number. Using other stateful React components should work in a similar way.

You will also find createEntryDate which uses the jQuery datepicker plugin. React lifecycle methods and ref are used to integrate the plugin.

Neither of these techniques are specific to Meiosis; they are standard React practices. Hopefully, this example gives you a good idea of how to use them. The full example is below:

Mithril

Using lifecycle methods in Mithril can be useful for using third-party components that are not designed to work with virtual-DOM libraries, but rather (for example) jQuery.

In this example, we are using this jQuery datepicker plugin.

Additionally, some third-party components are designed to work with Mithril, but manage their own internal state and rely on the autoredraw mechanism provided by m.mount. We can use this method instead of m.render, as we'll see below. We'll write our own component as a proof of concept.

Looking at the example below, you will find createEntryNumber, which creates a Mithril component that manages its internal state, and provides a function to retrieve the entry number. Using other Mithril components should work in a similar way.

You will also find createEntryDate which uses the jQuery datepicker plugin. Mithril lifecycle methods are used to integrate the plugin.

Neither of these techniques are specific to Meiosis; they are standard Mithril practices. Hopefully, this example gives you a good idea of how to use them. The full example is below:

Table of Contents


Meiosis is developed by @foxdonut00 / foxdonut and is released under the MIT license.