React Smart Paste Button

Overview

The React Smart Paste Button is an AI-powered enhancement of Syncfusion’s Button component, enabling intelligent clipboard pasting with contextual accuracy and proper formatting to boost productivity.

AI-enhanced clipboard

The Smart Paste Button scans clipboard content before pasting to ensure relevance to the current context, eliminating manual formatting. It automatically detects form fields (<input>, <select>, <textarea>) within your <form> elements and generates descriptions from associated <label> tags, name attributes, or nearby text.

Annotating form fields

Enhance AI precision by customizing form component attributes, allowing you to provide specific instructions for the language model. This results in more accurate and context-aware field values.

```html
<input data-smartpaste-description="The user's vehicle registration number, formatted as XYZ-123." />

<textarea data-smartpaste-description="The job description should begin with the job title in all caps, followed by a paragraph of text."></textarea>

<input type="checkbox" data-smartpaste-description="Check if the product description indicates suitability for children; otherwise, uncheck" />
```

Inherited features

Since it’s built on top of Syncfusion’s React Button component, the Smart Paste Button inherits all the features of the Button component, including predefined styles, icons, and customizable styling.

Built-in themes

The React Smart Paste Button control supports built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these built-in themes or create new themes to achieve the desired look and feel either by overriding SASS variables or using the Theme Studio application.

• Theme Studio application

Other supported frameworks

The Smart Paste Button component is also available in Blazor, Vue, Angular, and JavaScript frameworks. Check out the different Smart Paste Button platforms at the links below:

• Blazor Smart Paste Button
• Vue Smart Paste Button
• Angular Smart Paste Button
• JavaScript Smart Paste Button

Web accessibility

• Fully supports WAI-ARIA accessibility practices to work with screen readers and assistive devices.
• Follows WAI-ARIA best practices for implementing keyboard interaction.
• Bases UI element visuals, such as foreground color, background color, line spacing, text, and images, on WCAG 2.0 standards.
• Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian.

React Smart Paste Button code example

Get started with the React Smart Paste Button using just a few lines of TSX code as demonstrated below. Also explore our React Smart Paste example that shows you how to render and configure a Smart Paste Button in React.

// Import the Smart Paste Button.
import { SmartPasteButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';
// To render Button.
export default class App extends React.Component {
    render() {
        return (<SmartPasteButtonComponent id="smart-paste" type="button" aiAssistHandler={serverAIRequest} iconCss='e-icons e-paste' content='Smart Paste'></SmartPasteButtonComponent>);
    }
}