Strapi String List Field Plugin

A custom field plugin for Strapi that provides a sortable list of strings with an intuitive interface for content creators.

Features

• ✨ Easy to use: Simple interface to add, remove, and reorder string items
• 🎯 Drag-free sorting: Use arrow buttons to move items up and down
• 🔧 Configurable: Set minimum and maximum number of items
• ✅ Validation: Built-in required field validation
• 📱 Responsive: Works seamlessly in the Strapi admin panel
• 🎨 Native design: Follows Strapi's design system

Installation

npm install strapi-string-list-field

yarn add strapi-string-list-field

pnpm add strapi-string-list-field

Usage

After installation, the plugin will automatically register a new custom field type called "String List" in your Strapi admin panel.

Adding the field to your content type

1. Go to Content-Types Builder in your Strapi admin panel
2. Select the content type you want to add the field to
3. Click Add another field
4. Select Custom tab
5. Choose String List
6. Configure your field options
7. Save and restart your application

Field Configuration

The String List field supports the following options:

Base Options

• Required field: Make the field mandatory for content creation

Advanced Options

• Minimum items: Set the minimum number of items required
• Maximum items: Set the maximum number of items allowed

Using the field

The String List field provides an intuitive interface where users can:

• Add items: Type in the input field and press Enter or click the "Add" button
• Remove items: Click the trash icon next to any item
• Reorder items: Use the up/down arrow buttons to move items
• View items: All items are displayed in a scrollable list

API Usage

The field stores data as a JSON array of strings. Here's how to work with it in your API:

Creating content with string list

// POST /api/your-content-type
{
  "title": "Example Content",
  "tags": ["JavaScript", "React", "Strapi", "Plugin"]
}

Querying content

// GET /api/your-content-type
{
  "data": [
    {
      "id": 1,
      "attributes": {
        "title": "Example Content",
        "tags": ["JavaScript", "React", "Strapi", "Plugin"]
      }
    }
  ]
}

Filtering by string list items

// GET /api/your-content-type?filters[tags][$contains]=React

Development

Requirements

• Strapi v5.27.0 or higher
• Node.js 18+
• React 18+

Building the plugin

npm run build

Watching for changes

npm run watch

Type checking

npm run test:ts:front  # Frontend TypeScript
npm run test:ts:back   # Backend TypeScript

Plugin Structure

strapi-string-list-field/
├── admin/                 # Frontend (admin panel)
│   ├── src/
│   │   ├── components/
│   │   │   ├── Initializer.tsx
│   │   │   ├── PluginIcon.tsx
│   │   │   └── StringListInput.tsx    # Main input component
│   │   ├── translations/
│   │   │   └── en.json
│   │   ├── utils/
│   │   │   └── getTranslation.ts
│   │   ├── index.ts                   # Plugin registration
│   │   └── pluginId.ts
│   └── custom.d.ts
├── server/                # Backend
│   └── src/
│       ├── config/
│       ├── register.ts                # Custom field registration
│       └── index.ts
└── package.json

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License.

Support

If you encounter any issues or have questions:

1. Check the GitHub Issues
2. Create a new issue if your problem isn't already reported
3. Contact us at [email protected]

Changelog

0.0.0

• Initial release
• Basic string list functionality
• Sortable items with arrow controls
• Configurable min/max items
• Required field validation

Made with ❤️ by Sysentive