Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Doc] Add PredictiveTextInput chapter #9016

Merged
merged 1 commit into from
Jun 15, 2023
Merged

[Doc] Add PredictiveTextInput chapter #9016

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions docs/Features.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -678,6 +678,39 @@ const CustomerEdit = () => (

And if you want something super custom that react-admin doesn't support out of the box, you can always use [react-hook-form](https://react-hook-form.com/) directly.

## AI-Powered Components

React-admin leverages recent breakthroughs in AI to **boost developer productivity**.

One example is [`<PredictiveTextInput>`](./PredictiveTextInput.md), which suggests completion for the input value, using your favorite AI backend. Users can accept the completion by pressing the `Tab` key. It's like Intellisense or Copilot for your forms.

<video controls autoplay playsinline muted loop>
<source src="./img/PredictiveTextInput.mp4" type="video/mp4"/>
Your browser does not support the video tag.
</video>

Use `<PredictiveTextInput>` in any react-admin form:

```jsx
import { Edit, SimpleForm, TextInput } from 'react-admin';
import { PredictiveTextInput } from '@react-admin/ra-ai';

const PersonEdit = () => (
<Edit>
<SimpleForm>
<TextInput source="firstName" />
<TextInput source="lastName" />
<TextInput source="company" />
<PredictiveTextInput source="email" />
<PredictiveTextInput source="website" />
<PredictiveTextInput source="bio" multiline />
</SimpleForm>
</Edit>
);
```

See [the `<PredictiveTextInput>` documentation](./PredictiveTextInput.md) for more details.

## Optimistic Updates And Undo

When a user edits a record and hits the "Save" button, the UI shows a confirmation and displays the updated data *before sending the update query to the server*. The main benefit is that UI changes are immediate - **no need to wait for the server response**. It's a great comfort for users.
Expand Down
2 changes: 1 addition & 1 deletion docs/Inputs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ React-admin provides a set of Input components, each one designed for a specific

| Data Type | Example value | Input Components |
|-----------------------|--------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| String | `'Lorem Ipsum'` | [`<TextInput>`](./TextInput.md) |
| String | `'Lorem Ipsum'` | [`<TextInput>`](./TextInput.md), [`<PredictiveTextInput>`](./PredictiveTextInput.md) |
| Rich text | `<p>Lorem Ipsum</p>` | [`<RichTextInput>`](./RichTextInput.md) |
| Markdown | `# Lorem Ipsum` | [`<MarkdownInput>`](./MarkdownInput.md) |
| Password | `'********'` | [`<PasswordInput>`](./PasswordInput.md) |
Expand Down
Loading