Zentara

English | 한국어

A powerful React-based input component library with support for plugins like emoji selection and template variable autocompletion.

Features

• 🔌 Plugin-based architecture
• 🎯 TypeScript support
• 🎨 Customizable styling
• 📦 Small bundle size
• ⚡ High performance
• 📚 React-hook-form compatibility

Installation

npm install @zentara/core
# or
yarn add @zentara/core
# or
pnpm add @zentara/core

Usage

import { ZentaraInput } from '@zentara/core';
import { suggestionsPlugin } from '@zentara/plugin-suggestions';

function App() {
  const [value, setValue] = useState('');

  return (
    <ZentaraInput
      value={value}
      onChange={setValue}
      plugins={[
        {
          plugin: suggestionsPlugin,
          config: {
            rules: [
              {
                // Emoji suggestions
                triggers: [':'],
                suggestions: ['grinning', 'heart', 'thumbsup', 'party'],
                transform: (suggestion) => `${emojiMap[suggestion]} `,
                renderSuggestion: (suggestion) => (
                  <>
                    <span className='zentara-suggestion-primary'>
                      {emojiMap[suggestion]}
                    </span>
                    <span className='zentara-suggestion-secondary'>
                      {`:${suggestion}:`}
                    </span>
                  </>
                ),
              },
              {
                // Template variable suggestions
                triggers: ['{{.'],
                suggestions: ['name', 'email', 'age'],
                transform: (suggestion) => `{{.${suggestion}}}`,
                renderSuggestion: (suggestion) => (
                  <code className='zentara-suggestion-code'>
                    {`{{.${suggestion}}}`}
                  </code>
                ),
              },
              {
                // Issue reference suggestions
                triggers: [/#\d*$/, /[Ii]ssue-\d*$/],
                suggestions: ['123: Bug fix', '456: Feature request'],
                transform: (suggestion) => {
                  const id = suggestion.split(':')[0];
                  return `#${id} `;
                },
                renderSuggestion: (suggestion) => {
                  const [id, title] = suggestion.split(':');
                  return (
                    <>
                      <span className='zentara-suggestion-primary'>#{id}</span>
                      <span className='zentara-suggestion-secondary'>
                        {title}
                      </span>
                    </>
                  );
                },
              },
            ],
            maxSuggestions: 5,
          },
        },
      ]}
    />
  );
}

const emojiMap = {
  grinning: '😀',
  heart: '❤️',
  thumbsup: '👍',
  party: '🎉',
};

Plugins

Suggestions Plugin (@zentara/plugin-suggestions)

A flexible suggestion plugin that can be configured for various use cases:

• Multiple trigger patterns (string or RegExp)
• Custom suggestion lists
• Customizable transformation of selected suggestions
• Custom rendering of suggestion items

Configuration options:

interface SuggestionRule {
  // Strings or RegExp patterns that trigger the suggestion popup
  triggers: (string | RegExp)[];
  // List of suggestions to search through
  suggestions: string[];
  // Transform the selected suggestion into the final text
  transform: (suggestion: string) => string;
  // Optional custom rendering of suggestion items
  renderSuggestion?: (suggestion: string) => JSX.Element;
}

interface SuggestionsPluginConfig {
  // List of suggestion rules
  rules: SuggestionRule[];
  // Maximum number of suggestions to show
  maxSuggestions?: number;
}

Development

# Install dependencies
pnpm install

# Run development server
pnpm dev

# Build
pnpm build

# Lint
pnpm lint

# Format
pnpm format

Project Structure

packages/
  ├── core/          # Main component
  ├── types/         # Type definitions
  ├── plugins/       # Plugins
  │   └── suggestions/  # Suggestions plugin (emoji & template)
  └── example/       # Example project

Contributing

Want to contribute? Check out our contribution guide.

License

MIT © HoYeon Lee