Introduction

Every takeymakey tool is powered by a little bit of JavaScript. The code defines some inputs and processes them into some output.

Let’s take a look at some sample code. The tool exports two properties, take and make.

export const take = [ /* some inputs */ ]

export const make = () => [ /* some output */ ]

The first property, take, is an array of fields. To create a single input, add an array with one object that defines a field.

export const take = [
  {
    type: "text",
    label: "My example input",
  },
]

The type property determines which field to use. In this case, we are using a text field. This creates an input in the tool where a user can add some text. The label is shown near the input to let users know what information is needed.

Now that the form has some fields, it’s time to define the make function.

export const make = function () {
  return [
    {
      type: "text",
      label: "My example output",
      value: "Hello world!",
    },
  ]
}

The function returns an array that is very similar to one defined by take. Here again, each item in the array will create an output in the form. This output also uses the text field, with a slightly different label.

This time, though, the new value property is also included. At the moment, this function returns "Hello world!" no matter what the inputs are. That input data can be accessed as the first and only argument passed to make.

export const take = [
  {
    type: "text",
    label: "My example input",
  },
]

export const make = function (data) {
  return [
    {
      type: "text",
      label: "My example output",
      value: data.toUpperCase(),
    },
  ]
}

This function takes a string that the user inputs, and transforms it to use uppercase characters. Now we have a fully working example and have built our first working tool!

Now that you’ve finished this introduction, read more about the take and make properties, or dive in and build your own tool.

Introduction

Take