We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies

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.

React Smart Paste Button component overview


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.


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:


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>);
    }
}

85+ REACT UI COMPONENTS

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion reduces customers’ development time.
Here are some of their experiences.

Rated by users across the globe

Transform your applications today by downloading our free evaluation version
Download Free Trial No credit card required.

Awards

Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.

Up arrow icon