0.1.2 • Published 7 years ago
react-caps v0.1.2
A Confirm, Alert and Prompts (CAPs) library for React
Dropin replacement for the browser's default and ugly alert, confirm and prompt dialogs for your React project
- This component is very very new and I would advise you to not use it as of now.
Dependencies
Apart from react
, this component is dependent on styled-jsx
npm i react react-dom styled-jsx --save
// OR
yarn add react react-dom styled-jsx
Installing
Install via NPM running:
npm i react-caps --save
// OR
yarn add react-caps
How to use
Add CapsContainer
component to the root element of your application.
import React from "react";
import { CapsContainer } from "react-caps";
import ExampleComponent from "./example-component";
class App extends React.Component {
render() {
return (
<div className="App">
// add 'caps' container to the root element of app
<CapsContainer />
// use your other components as usual
<ExampleComponent/>
</div>
);
}
}
export default App;
Then, in a React component, use caps.alert()
, caps.confirm()
and caps.prompt()
instead of alert()
, confirm()
and prompt()
import React from "react";
import caps from "react-caps";
class ExampleComponent extends React.Component {
showAlert = () => {
caps.alert("Your alert message");
};
showConfirm = () => {
caps.confirm("Are you sure?", () => {
// this function will run on clicking confirm
caps.alert("You clicked Confirm!!");
});
};
showPrompt = () => {
caps.prompt("Label", (value) => {
// this function will run on clicking ok
caps.alert("You entered: "+value);
});
};
render() {
return (
<div>
<button onClick={this.showAlert}>
<button onClick={this.showConfirm}>
<button onClick={this.showPrompt}>
</div>
);
}
}
export default ExampleComponent;