syncfusion-react-toolbar 100/100

Is syncfusion-react-toolbar safe to install?

SaferSkills independently audited syncfusion-react-toolbar (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.

CategoryWeightCategory scoreContribution

Securityprompt, exec, net, exfil, eval

35%

100

35.0 pts

Supply chainhash, typosquat, maintainer, lockfile

20%

100

20.0 pts

Maintenancestaleness, pinning, CI

15%

100

15.0 pts

TransparencySKILL.md, perms, README

15%

100

15.0 pts

Communityinstalls, verify, response

15%

100

15.0 pts

Findings & checks · 0 flagged

Securityscore 100 · 0 findings

✓—All security checks passedNo findings in this category for the latest scan.pass

Supply chainscore 100 · 0 findings

✓—All supply chain checks passedNo findings in this category for the latest scan.pass

Maintenancescore 100 · 0 findings

✓—All maintenance checks passedNo findings in this category for the latest scan.pass

Transparencyscore 100 · 0 findings

✓—All transparency checks passedNo findings in this category for the latest scan.pass

Communityscore 100 · 0 findings

✓—All community checks passedNo findings in this category for the latest scan.pass

The primary manifest — the file an agent reads to learn what this artifact does.

skills/syncfusion-react-toolbar/SKILL.md · 1 file

skills/syncfusion-react-toolbar/SKILL.md13.3 KB · Markdown

name: syncfusion-react-toolbar

description: "Implement the Syncfusion React Toolbar component to create responsive command bars and action toolbars. This skill covers organizing buttons, separators, and input components with various overflow handling modes. Use this when building rich text editors, document editors, or command-driven interfaces in React applications."

metadata:

author: "Syncfusion Inc"

version: "33.1.44"

category: "Navigation"

Component Overview

The Syncfusion React Toolbar component provides a flexible command bar for organizing and executing commands. It supports multiple item types (buttons, separators, inputs), responsive overflow modes, and comprehensive accessibility features.

Key Capabilities:

Multiple item types: Button, Separator, Input
Responsive overflow modes: Scrollable, Popup, MultiRow, Extended
Built-in keyboard navigation and ARIA support
Component rendering within toolbar items
Customizable appearance and behavior
Tab key navigation support
Dynamic item management (add/remove/enable/disable)
Rich event system (beforeCreate, clicked, keyDown, created, destroyed)
Full RTL and locale support
Stateless template rendering

Complete Table of Contents

1. Getting Started

File: references/getting-started.md

Dependencies setup
Project initialization (Vite/CRA)
Package installation
CSS theme imports (Tailwind, Bootstrap, Fluent, Material)
Basic implementation examples
Global configuration:
Locale support for internationalization
RTL (Right-to-Left) layout
Persistence settings
Collision detection
HTML sanitizer
Development server setup

2. Item Configuration

File: references/item-configuration.md

ItemModel API Reference:
Complete interface structure
All 16 properties with types
Property reference with descriptions
Items array configuration patterns
Configuration examples (simple, grouped, conditional, accessible)
Button item type with properties:
text - Display text
id - Unique identifier
prefixIcon / suffixIcon - Icons positioning
width - Custom width
align - Alignment (Left/Center/Right)
disabled - Disabled state
visible - Visibility control
cssClass - Custom CSS classes
htmlAttributes - HTML attributes
overflow - Priority display (Show/Hide/None)
showAlwaysInPopup - Force popup display
showTextOn - Text display mode (Both/Overflow/Toolbar)
Separator item type
Input item type for components
Tab navigation with tabIndex
Complete working examples

3. Responsive Modes

File: references/responsive-modes.md

Scrollable Mode (default)
Horizontal scrolling with navigation arrows
Touch swipe support
Keyboard arrow navigation
Use cases: many items, large screens
Popup Mode
Dropdown overflow container
Command priority control
Compact appearance
Use cases: limited space, mobile
MultiRow Mode
Item wrapping to multiple rows
No scrolling needed
All items visible
Use cases: responsive width containers
Extended Mode
Multi-row with horizontal scrolling
Row-level navigation
Use cases: many items in limited width
Command priority (Show/Hide/None)
Text display options (Both/Overflow/Toolbar)
Mode comparison table
Practical examples for each mode

4. Accessibility & Keyboard Support

File: references/accessibility.md

Compliance standards:
WCAG 2.2 Level AA
Section 508 compliance
Screen reader support (NVDA, JAWS, VoiceOver)
ARIA attributes:
role="toolbar"
aria-label, aria-orientation
aria-expanded, aria-haspopup
Keyboard navigation:
allowKeyboard property control
Arrow keys (Left/Right) navigation
Home/End keys
Tab/Shift+Tab for focus
Enter/Space for activation
Escape to close popups
keyDown Event handling:
Event parameters (currentItem, nextItem, originalEvent)
Custom keyboard shortcuts
Preventing default navigation
Key-specific actions
Screen reader support and testing
Color contrast WCAG compliance
Mobile/touch accessibility
RTL support
ARIA best practices
Testing checklist and tools

5. Item Configuration (Continued)

File: references/item-configuration.md

Button properties reference
Separator styling
Input components (NumericTextBox, DropDownList, CheckBox, RadioButton)
Tab navigation control
Complete toolbar examples

6. Styling & Customization

File: references/styling-customization.md

CSS class structure:
.e-toolbar - Container
.e-toolbar-item - Item wrapper
.e-tbar-btn - Button
.e-icons - Icon element
.e-separator - Separator
.e-toolbar-pop - Popup
Toolbar container styling
Item & button styling
Icon styling and customization
State styling (hover, focus, active, disabled)
Theme integration (Tailwind, Bootstrap, Fluent, Material)
Popup customization CSS classes:
.e-toolbar-pop - Popup container
.e-overflow-button - Dropdown toggle
.e-overflow-show - Show priority items
.e-overflow-hide - Hide priority items
.e-popup-text - Popup text styling
.e-toolbar-text - Toolbar text styling
Custom styling examples
Performance optimization
Complete styled examples

7. Advanced Features & Templates

File: references/advanced-features.md

Template Configuration:
Template basics (functions/JSX)
Template properties
When to use templates
Item-Wise Custom Templates:
Single item templates
Multiple different templates
State within templates
Template styling
Stateless Templates:
Performance optimization
CSS class customization
Popup customization equivalents
Toggle Buttons:
Single toggle state
Toggle groups (radio-like)
CSS styling
Link Items:
Navigation links
External links
Breadcrumb patterns
Tooltips:
HTML title attribute
Custom tooltip components
Styling and positioning
Rendering Other Components:
Syncfusion components (DropDownList, NumericTextBox, ColorPicker)
React components
Custom components
Command Customization:
Click handlers
Context menus
Custom actions
Dynamic Item Management:
addItems() - Add items at runtime
removeItems() - Remove by index or ID
enableItems() - Enable/disable items
hideItem() - Show/hide items
disable() - Disable entire toolbar
destroy() - Cleanup
refreshOverflow() - Recalculate layout
Event Handling:
beforeCreate - Pre-initialization customization
created - Post-initialization callback
clicked - Item click events with ClickEventArgs
keyDown - Keyboard events with KeyDownEventArgs
destroyed - Cleanup event
Scroll Step Customization:
Control scroll distance
Dynamic scroll step
Touch swipe behavior
Complete advanced example

Getting Started

📄 Read: references/getting-started.md

Package installation and dependencies
Setup with Vite and React
CSS imports and theme configuration
Basic toolbar with ItemsDirective
HTML element initialization
Running the development server

Item Configuration & Types

📄 Read: references/item-configuration.md

Button item type with properties (text, icons, width, align)
Separator item type
Input item type for components
Tab key navigation with tabIndex
Complete working examples

Responsive Modes

📄 Read: references/responsive-modes.md

Scrollable mode (default behavior)
Popup overflow mode
Command priority (show, hide, none)
Text display options
Navigation and interaction patterns

Accessibility & Keyboard Support

📄 Read: references/accessibility.md

WCAG 2.2 and Section 508 compliance
ARIA attributes and roles
Keyboard navigation keys
Screen reader support
Mobile device accessibility

Styling & Customization

📄 Read: references/styling-customization.md

CSS customization patterns
Toolbar and item styling
Icon and button customization
Hover and focus states
Theme integration

Advanced Features & Templates

📄 Read: references/advanced-features.md

Template configuration and patterns
Item-wise custom templates
Toggle buttons
Link items
Tooltips
Rendering other Syncfusion components
Command and scroll customization

Quick Start Example

import { ItemDirective, ItemsDirective, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import './App.css';

const App = () => {
  return (
    <ToolbarComponent id='toolbar'>
      <ItemsDirective>
        <ItemDirective text="Cut" prefixIcon="e-cut-icon" />
        <ItemDirective text="Copy" prefixIcon="e-copy-icon" />
        <ItemDirective text="Paste" prefixIcon="e-paste-icon" />
        <ItemDirective type="Separator" />
        <ItemDirective text="Bold" prefixIcon="e-bold-icon" />
        <ItemDirective text="Italic" prefixIcon="e-italic-icon" />
        <ItemDirective text="Underline" prefixIcon="e-underline-icon" />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

Required CSS imports in App.css:

@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-react-navigations/styles/tailwind3.css';

Common Patterns

Create a simple toolbar with button commands and visual separators between groups:

<ToolbarComponent>
  <ItemsDirective>
    {/* Edit commands */}
    <ItemDirective text="Cut" />
    <ItemDirective text="Copy" />
    <ItemDirective type="Separator" />
    {/* Format commands */}
    <ItemDirective text="Bold" />
    <ItemDirective text="Italic" />
  </ItemsDirective>
</ToolbarComponent>

Use prefixIcon to add icons to buttons for better visual representation:

<ItemDirective text="Save" prefixIcon="e-save-icon" />
<ItemDirective text="Print" prefixIcon="e-print-icon" />

Responsive Overflow Handling

Choose between Scrollable (default) for continuous display or Popup for compact overflow:

{/* Scrollable mode with navigation arrows */}
<ToolbarComponent overflowMode="Scrollable">
  {/* items */}
</ToolbarComponent>

{/* Popup mode with dropdown */}
<ToolbarComponent overflowMode="Popup">
  {/* items */}
</ToolbarComponent>

Include interactive components like dropdowns within toolbar items:

<ItemDirective type="Input" template={<DropDownComponent {...props} />} />

Key Props

Property	Type	Description
`id`	string	Unique identifier for the toolbar
`overflowMode`	"Scrollable" \	"Popup"	How to handle overflow items
`width`	string	Width of the toolbar container
`items`	ItemModel[]	Array of toolbar items
`text`	string	Display text for button items
`prefixIcon`	string	Icon class for prefix position
`suffixIcon`	string	Icon class for suffix position
`type`	"Button" \	"Separator" \	"Input"	Item type
`align`	"Left" \	"Center" \	"Right"	Item alignment
`overflow`	"Show" \	"Hide" \	"None"	Priority for popup mode
`tabIndex`	number	Tab navigation order
`template`	function	Custom template for items

Common Use Cases

Text Editor Toolbar

Format buttons (Bold, Italic, Underline)
Alignment options
Color and font pickers
See: responsive-modes.md, advanced-features.md

File Operations Toolbar

New, Open, Save, Save As buttons
Print functionality
Undo/Redo commands
See: item-configuration.md, advanced-features.md

Responsive Mobile Toolbar

Popup overflow mode for compact display
Scrollable mode for continuous access
See: responsive-modes.md

Accessible Command Bar

Keyboard navigation support
ARIA attributes
Screen reader friendly
See: accessibility.md

Customized Branded Toolbar

Custom CSS styling
Theme integration
Company-specific icons
See: styling-customization.md

Summary

The Toolbar component provides a comprehensive solution for command organization and execution in React applications. Start with getting-started.md for basic setup, then explore specific features based on your needs. Use advanced-features.md for template customization and complex scenarios.

Navigation Path:

Getting Started → Basic toolbar setup
Item Configuration → Add different item types
Responsive Modes → Handle overflow
Accessibility → Ensure keyboard support
Styling → Customize appearance
Advanced Features → Templates and custom components

syncfusion-react-toolbar— agent skill

Is syncfusion-react-toolbar safe to install?

Component Overview

Complete Table of Contents

1. Getting Started

2. Item Configuration

3. Responsive Modes

4. Accessibility & Keyboard Support

5. Item Configuration (Continued)

6. Styling & Customization

7. Advanced Features & Templates

Documentation and Navigation Guide

Getting Started

Item Configuration & Types

Responsive Modes

Accessibility & Keyboard Support

Styling & Customization

Advanced Features & Templates

Quick Start Example

Common Patterns

Responsive Overflow Handling

Key Props

Common Use Cases

Summary

Audit the pieces. Scan the whole. Decide.

Is syncfusion-react-toolbar safe to install?

Implementing Syncfusion React Toolbar

Component Overview

Complete Table of Contents

1. Getting Started

2. Item Configuration

3. Responsive Modes

4. Accessibility & Keyboard Support

5. Item Configuration (Continued)

6. Styling & Customization

7. Advanced Features & Templates

Documentation and Navigation Guide

Getting Started

Item Configuration & Types

Responsive Modes

Accessibility & Keyboard Support

Styling & Customization

Advanced Features & Templates

Quick Start Example

Common Patterns

Basic Toolbar with Buttons and Separators

Toolbar with Icons

Responsive Overflow Handling

Toolbar with Input Components

Key Props

Common Use Cases

Summary

Audit the pieces. Scan the whole. Decide.