The simple guidance: How to add tagsInput customField plugin in Strapi

Introduction

In the world of web development, content management systems (CMS) play a vital role in enabling the efficient creation, organization, and publication of digital content.

Strapi, a leading headless CMS, empowers developers with its flexibility and extensibility. One of its standout features is the ability to create custom fields, allowing developers to tailor the CMS to their specific needs.

One of the Input fields I needed in my project is tagsInput. And I am not able to find out any solutions for Strapi and ended up creating a custom field plugin.

This article will guide you on how to create a powerful and dynamic custom field plugin called TagsInput in Strapi. Additionally, this article is also helpful to add any type of custom field apart from tagsInput.

So, fasten your seatbelts and get ready to embark on a journey that will elevate your Strapi projects to new heights.

Sponsored

Want to build good habits but procrastinate? You can try justly.

What will you learn?

How to add tagsInput customfield in strapi admin panel?

You can use tagsInput readily from npm also.

Generate Strapi plugin

The first step is to generate the Strapi plugin using its command line facility.

• Run the below command to create a plugin.

yarn strapi generate

You will see some files have been added to src/plugins the folder in Strapi. That is our plugin.

We will add some custom code to generate the tagsInput field.

Add input field

We will use react-tagsinput for integrating tagsinput in Strapi.

create an Input directory inside the admin/src/components folder in the plugin directory, and then create a file named index.js inside the Input directory.

We will use the TagsInput field from react-tagsinput and will display and save tags using handleTagsChange on onchange event like below,

<TagsInput value={tags} onChange={handleTagsChange} />

Here is the state initialization of tags,

// tags will be array of string
const [tags, setTags] = useState(() => {
    try {
      const values = JSON.parse(value);
      return values.map((value) => value.name);
    } catch (e) {
      return [];
    }
  });

Let’s create handleTagsChange method to set tags in tagsInput as well as save in the Strapi database,

const handleTagsChange = (tags) => {
    setTags(tags);   // set tags to show in tagsInput

    // prepare data for saving in database
    onChange({
      target: {
        name,
        value: JSON.stringify(tags.map((tag) => ({ name: tag }))),
        type: attribute.type, 
      },
    });
  };

Here is the full code of Input/index.js file,

import TagsInput from "react-tagsinput";
import "react-tagsinput/react-tagsinput.css";
import React, { useState } from "react";

const Tags = ({
  attribute,
  name,
  onChange,
  value,
}) => {
  const [tags, setTags] = useState(() => {
    try {
      const values = JSON.parse(value);
      return values.map((value) => value.name);
    } catch (e) {
      return [];
    }
  });

  const handleTagsChange = (tags) => {
    setTags(tags);
    onChange({
      target: {
        name,
        value: JSON.stringify(tags.map((tag) => ({ name: tag }))),
        type: attribute.type, // this will be string
      },
    });
  };

  return <TagsInput value={tags} onChange={handleTagsChange} />;
};

export default Tags;

Register plugin

Our base code is ready, it's time to register the plugin to use it in the admin panel.

We will register the tagsinput custom field using the app.customField method.

Go to the admin/src/index.js file and write the following code in the register method,

app.customFields.register({
      name: "tags",  // name of the field
      pluginId: pluginId,  
      type: "text",  // type of the customField

      // Label of the field, you will see it when use the field
      intlLabel: {
        id: "tagsinput.tag.label",
        defaultMessage: "TagsInput", 
      },

      // Description of the field, you will see it when use the field
      intlDescription: {
        id: "tagsinput.tag.description",
        defaultMessage: "TagsInput to add custom tags",
      },

      // import our created component here which is Input/index.js
      components: {
        Input: async () =>
          import(
            /* webpackChunkName: "input-component" */ "./components/Input"
          ),
      },
  });

Also, add the below code in server/register.js to register the plugin,

module.exports = ({ strapi }) => {
  strapi.customFields.register({
    name: "tags", // name of the field
    plugin: "tagsinput", // plugin name
    type: "json", // type you want in API
  });
};

That’s it. Your tagsInput plugin is created. You can use it in the config/plugins.js file below,

 'tagsinput': {
    enabled: true,
    resolve: './src/plugins/tagsinput'
  },

How to use it?

After performing the above steps, you need to remove the cache and build the project again to reflect changes.

Remove .cache directory and build the project using yarn build . Run the server and you will able to see the tagsInput plugin in the plugins section in the admin panel.

You can perform these steps to add the tagsInput field.

Here is the tagsInput plugin for Strapi. You can use it readily by installing using npm or yarn.

Conclusion

Congratulations! You have successfully created the TagsInput custom field plugin in Strapi.

Strapi provides various ways to customize your admin panel as per requirements. Always stay curious, and keep pushing the boundaries of what is possible with Strapi.

We’re Grateful to have you with us on this journey!

Suggestions and feedback are more than welcome! 

Please reach us at Canopas Twitter handle @canopas_eng with your content or feedback. Your input enriches our content and fuels our motivation to create more valuable and informative articles for you.

Similar Article