1.5.32 • Published 2 years ago
@jielo/modal_ocr14 v1.5.32
@jielo/modal_ocr14
This is a simplified modal for basic usage created for an Open Class Rooms course project !
Authors
Installation
Install my-project with npm
npm i @jielo/modal_ocr14
Screenshots
🛠 Skills
- HTML
- CSS
- Javascript
- React
- Redux (Optional)
Props
This modal is fully configurable. You will need to use the following props to modify it:
- image
- message
- Closing function
CSS
A CSS file is include and you can change all properties in your own css file !
Usage/Examples
In the component where you call the modal. For this exemple, we are using App
import React from "react";
import Image from "../assets/image.png"; // // Choose name and location according to your project
import ModalEmployeeCreated from "@jielo/modal_ocr14";
import "@jielo/modal_ocr14/dist/cjs/index.css";
function App() {
const message = useSelector((state) => state.employee.ModalMessage); // You can use React hook like useState()
const dispatch = useDispatch();
function removeModal() {
dispatch(setModalMessage(""));
}
return {message !== "" && <ModalEmployeeCreated message={message} image={Image} closeFunction={removeModal} />}
}
export default App
Exemple of ToolKit State Manager
import { createSlice } from "@reduxjs/toolkit";
export const [yourSliceName] = createSlice({
name: "[yourName]",
initialState: {
ModalMessage: "",
},
reducers: {
setModalMessage: (state, action) => {
state.ModalMessage = action.payload;
},
},
});
export const { setModalMessage } = employeeSlice.actions;
1.5.32
2 years ago
1.5.31
2 years ago
1.5.30
2 years ago
1.5.29
2 years ago
1.5.27
2 years ago
1.5.26
2 years ago
1.5.25
2 years ago
1.5.24
2 years ago
1.5.23
2 years ago
1.5.22
2 years ago
1.5.21
2 years ago
1.5.20
2 years ago
1.5.11
2 years ago
1.5.10
2 years ago
1.5.9
2 years ago
1.5.8
2 years ago
1.5.7
2 years ago
1.5.6
2 years ago
1.5.5
2 years ago
1.5.4
2 years ago
1.5.3
2 years ago
1.5.2
2 years ago
1.5.1
2 years ago
1.5.0
2 years ago
1.4.1
2 years ago
1.3.4
2 years ago
1.3.3
2 years ago
1.3.2
2 years ago
1.3.1
2 years ago
1.3.0
2 years ago
1.2.0
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago