Async prompts

title: Async prompts

import { confirm, notify, alert, Button, Icon, Title, Text, Provider, AlertPanel, Card, } from "@concrete-design/core"; import styled from "styled-components";

Why async prompts ?

Sometimes we need to get user confirmation after a form submission or any other interaction. Borwsers have built-in functions like

confirm

that can get user validation but it won't be style. With React it can be a pain to add a validation modal after submition. We came up with functions helpers inspired by sweeetAlert that help us adding confirmation modals or even more complexe form called asynchronously.

Confirm

Concrete exports a

confirm

function that return a promise waiting for user response.

Usage

import { confirm, notify, Button } from "@concrete-design/core";

const MyComponent = () => {
  const handleSubmit = async () => {
    const hasConfirmed = confirm("Do you want to confirm ?");
    notify(`User response ${hasConfirmed ? "yes" : "no"}`);
  };

  return <Button onClick={handleSubmit}>Click Me!</Button>;
};

export const BasicConfirmUsage = () => { const handleSubmit = async () => { const hasConfirmed = await confirm({ message: "Do you want to confirm ?", confirmLabel: "Yes", cancelLabel: "No", }); notify(

User response is ${hasConfirmed ? "yes" : "no"}

); }; return ; };

Notify

notify

allows to render a sweet message at the bottom of the page from anywhere in the code as long as the code is behind the

Provider

Basic usage

const MyComponent = () => (
  <Button onClick={() => notify("I can be called from anwhere !")}>
    Click Me!
  </Button>
);

<Button onClick={() => notify("I can be called from anwhere !")}> Click Me!

With illustration

const MyComponent = () => (
  <Button
    onClick={() =>
      notify({
        message: "hi",
        illustration: <Icon icon="3D-building-outline" />,
      })
    }
  >
    Click Me!
  </Button>
);

<Button onClick={() => notify({ message: "hi", illustration: }) }

Click Me!

With JSX

const MyComponent = () => {
  const message = (
    <div>
      <Title type="regular">Title</Title>
      <Text>Text</Text>
    </div>
  );
  return <Button onClick={() => notify({ message })}>Click Me!</Button>;
};

<Button onClick={() => notify({ message: (

Text

), }) }

Click Me!

Markdown

You can pass directly markdown to

notify

if you need more complex rendering without passing jsx

const MyComponent = () => (
  <Button onClick={() => notify({ message: "**hi in bold**", markdown: true })}>
    Click Me!
  </Button>
);

<Button onClick={() => notify({ message: "hi in bold", markdown: true })}> Click Me!

Options

You can pass a 2nd argument to notify to configure the notification as you like

```
duration
```
:
```
number
```
```
type
```
:
```
'info | 'warning' | 'error'
```

const MyComponent = () => (
  <Button
    onClick={() => notify("ERROR !", { duration: 10_000, type: "error" })}
  >
    Click Me!
  </Button>
);

Types

export const TypeContainer = styled.div

  display: grid;   grid-template-columns: repeat(3, 1fr);   grid-gap: 24px;

;

Alert

alert

allows to add an

AlertBanner

at the very top of your application, where you placed your

Provider

Example

const MyComponent = () => {
  return <Button onClick={() => alert("I'm an alert !"}>Click Me!</Button>;
};

In this example, the provider is scoped to the next Card

Prompt

Prompt is a full customizable async util that render either a

Modal

or a

LightBox

prompt

takes a function as first argument that should return an object with a

Component

field. It returns a promise that is resolved by calling the

onResolve

function passed in the object of the first argument.

Modal

is used by default but you can pass

fullscreen: true

to use the

LightBox

component. Other

Modal

LightBox

props can be passed as params.

Example

import { prompt } from "@concrete-design/core";

const formResult = await prompt(({ onResolve }) => ({
  Component: () => <form onSubmit={onResolve}>// you form</form>,
}));
if (formResult) {
  // use your form result
}

title: Async prompts

import { confirm, notify, alert, Button, Icon, Title, Text, Provider, AlertPanel, Card, } from "@concrete-design/core"; import styled from "styled-components";

Why async prompts ?

Sometimes we need to get user confirmation after a form submission or any other interaction. Borwsers have built-in functions like

confirm

Confirm

Concrete exports a

confirm

function that return a promise waiting for user response.

Usage

import { confirm, notify, Button } from "@concrete-design/core";

const MyComponent = () => {
  const handleSubmit = async () => {
    const hasConfirmed = confirm("Do you want to confirm ?");
    notify(`User response ${hasConfirmed ? "yes" : "no"}`);
  };

  return <Button onClick={handleSubmit}>Click Me!</Button>;
};

User response is ${hasConfirmed ? "yes" : "no"}

); }; return ; };

Notify

notify

allows to render a sweet message at the bottom of the page from anywhere in the code as long as the code is behind the

Provider

Basic usage

const MyComponent = () => (
  <Button onClick={() => notify("I can be called from anwhere !")}>
    Click Me!
  </Button>
);

<Button onClick={() => notify("I can be called from anwhere !")}> Click Me!

With illustration

const MyComponent = () => (
  <Button
    onClick={() =>
      notify({
        message: "hi",
        illustration: <Icon icon="3D-building-outline" />,
      })
    }
  >
    Click Me!
  </Button>
);

<Button onClick={() => notify({ message: "hi", illustration: }) }

Click Me!

With JSX

const MyComponent = () => {
  const message = (
    <div>
      <Title type="regular">Title</Title>
      <Text>Text</Text>
    </div>
  );
  return <Button onClick={() => notify({ message })}>Click Me!</Button>;
};

<Button onClick={() => notify({ message: (

Text

), }) }

Click Me!

Markdown

You can pass directly markdown to

notify

if you need more complex rendering without passing jsx

const MyComponent = () => (
  <Button onClick={() => notify({ message: "**hi in bold**", markdown: true })}>
    Click Me!
  </Button>
);

<Button onClick={() => notify({ message: "hi in bold", markdown: true })}> Click Me!

Options

You can pass a 2nd argument to notify to configure the notification as you like

```
duration
```
:
```
number
```
```
type
```
:
```
'info | 'warning' | 'error'
```

const MyComponent = () => (
  <Button
    onClick={() => notify("ERROR !", { duration: 10_000, type: "error" })}
  >
    Click Me!
  </Button>
);

Types

export const TypeContainer = styled.div

  display: grid;   grid-template-columns: repeat(3, 1fr);   grid-gap: 24px;

;

Alert

alert

allows to add an

AlertBanner

at the very top of your application, where you placed your

Provider

Example

const MyComponent = () => {
  return <Button onClick={() => alert("I'm an alert !"}>Click Me!</Button>;
};

In this example, the provider is scoped to the next Card

Prompt

Prompt is a full customizable async util that render either a

Modal

or a

LightBox

prompt

takes a function as first argument that should return an object with a

Component

field. It returns a promise that is resolved by calling the

onResolve

function passed in the object of the first argument.

Modal

is used by default but you can pass

fullscreen: true

to use the

LightBox

component. Other

Modal

LightBox

props can be passed as params.

Example

import { prompt } from "@concrete-design/core";

const formResult = await prompt(({ onResolve }) => ({
  Component: () => <form onSubmit={onResolve}>// you form</form>,
}));
if (formResult) {
  // use your form result
}

Async prompts

title: Async prompts

Why async prompts ?

Confirm

Usage

Notify

Basic usage

With illustration

With JSX

Markdown

Options

Types

Alert

Example

Prompt

Example

Related Skills

Markdown Converter

Nano Banana Pro

1password

title: Async prompts

Why async prompts ?

Confirm

Usage

Notify

Basic usage

With illustration

With JSX

Markdown

Options

Types

Alert

Example

Prompt

Example