acrool/acrool-react-dialog

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 167 Commits
.github		.github
example		example
src		src
.commitlintrc.cjs		.commitlintrc.cjs
.editorconfig		.editorconfig
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
eslint.config.mjs		eslint.config.mjs
jest.config.mjs		jest.config.mjs
package.json		package.json
play-in-example-button.svg		play-in-example-button.svg
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts
yarn.lock		yarn.lock

Repository files navigation

Acrool React Dialog

Acrool React Dialog Logo

This is a dialog message function for React development dialog

NPM npm npm

npm downloads npm

^1.1.0 support react >=18.0.0 <20.0.0

Features

Supports 5 status colors: default, success, info, warning, danger
Call via global method
Plug and unplug using @acrool/react-portal and framer-motion

Install

yarn add framer-motion @acrool/react-dialog

Usage

add in your index.tsx

import "@acrool/react-dialog/dist/index.css";

add in your App.tsx

import {DialogPortal} from "@acrool/react-dialog";
const App = () => {
 return (
 <div>
 <BaseUsed/>
 <DialogPortal
 localeDictionaries={{
 'en-US': {
 'com.dialog.success': 'Success',
 'com.dialog.error': 'Danger',
 'com.dialog.info': 'Info',
 'com.dialog.warning': 'Warning',
 'com.dialog.confirm': 'Confirm',
 'com.dialog.ok': 'OK',
 'com.dialog.cancel': 'Cancel',
 }
 }}
 locale="en-US"
 isVisibleStatusIcon
 renderButton={args => createElement(Button, args, args.children)}
 renderTextField={args => createElement(TextField, args, null)}
 />
 
 </div>
 );
};

then in your page

import {EStatus, toast} from '@acrool/react-dialog';
const Example = () => {
 return (
 <div>
 <button type="button" onClick={() => dialog({message: 'step1 test dialog', code: 'TEST1'})}>
 useDialog message
 </button>
 </div>
 );
};