desmy-react v1.3.9
Desmy-react
Introducing an easy-to-use
, lightning-fast
React.js component that streamlines your development process. Our solution prioritizes simplicity
, speed
, and optimization
, making it a breeze to build projects in React.
Currently working on other components, contact desmydev@gmail.com for assistance
- Zero-dependency (pre-built bundle)
Features
- DesmyModalHandler
- DesmyDropDown
- DesmyClickOutsideListener
- DesmyModalContainer
- DesmyTextInput
Utilities
- DesmyAuth
- DesmyCommons
Installation
# Yarn
$ yarn add desmy-react
# NPM
$ npm i --save desmy-react
Using desmy-react library
The library utilizes dynamically created CSS by including 'desmy-react/dist/style.css' in your main.jsx or App.jsx file.
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'// Import your own components
import 'desmy-react/dist/style.css'; // Import the library CSS file
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
DesmyModalHandler
usage
To enable the modal functionality, include the following code snippet in your index.html body tag
<!-- This div will act as the container for your modal -->
<div id="modal-root"></div>
import { DesmyModalHandler } from 'desmy-react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: null // Initialize modal state
}
}
handleSubmit=(e)=>{
e.preventDefault()
try{
var settings={
btnPosition:`Continue`,
btnNegative:`Cancel`
}
const handleClose = (state) => {
this.setState({modal:null,}) // Close modal by setting modal state to null
}
const modal = <DesmyModalHandler settings={settings} onClose={handleClose}>
<div className='flex flex-col text-sm w-full py-2'>Testing dialog Desmy react?</div>
</DesmyModalHandler>;
this.setState({ modal }); // Set modal to be rendered
}catch(e){
// Handle errors
}
}
render(){
return (
<>
{this.state.modal} {/* Render the modal here */}
<form method="POST" onSubmit={this.handleSubmit}>
<button>Click to confirm</button>
</form>
</>
)
}
}
Make sure to add the line {this.state.modal}
to your component's render method to display the modal.
DesmyDropdown
usage
import React from 'react';
import { DesmyDropdown } from 'desmy-react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
genderlist:[{id:"FEMALE",name:"Female"},{id:"MALE",name:"Male"}],
input:{
gender:""
}
}
}
render(){
return (
<>
<form method="POST" onSubmit={this.handleSubmit}>
<div className="relative w-full group">
# Local
<DesmyDropdown
data={this.state.genderlist}
defaultValue={this.state.input.gender}
handleChange={(data)=>{
var {input} = this.state
input['gender'] = data.id
this.setState({input})
}}
dropdownClass={`bg-black text-black border`}
placeholder={`Placeholer`}
dropdownListClass={`flex w-full bg-white dark:bg-slate-900 text-black dark:text-white hover:bg-gray-200`}
className={`flex w-full dark:text-white text-sm border-0 border-black dark:border-gray-300 bg-transparent outline-none focus:outline-none`}
/>
# Server Request
<DesmyDropdown
request={{
url:"endpoint_url_here"//https://example.com/1/
}}
defaultValue={this.state.input.gender}
handleChange={(data)=>{
var {input} = this.state
input['gender'] = data.id
this.setState({input})
}}
dropdownClass={`bg-black text-black border`}
placeholder={`Placeholer`}
dropdownListClass={`flex w-full bg-white dark:bg-slate-900 text-black dark:text-white hover:bg-gray-200`}
className={`flex w-full dark:text-white text-sm border-0 border-black dark:border-gray-300 bg-transparent outline-none focus:outline-none`}
/>
</div>
</form>
</>
)
}
export default App
}
DesmyModalContainer
usage
import { DesmyModalContainer } from 'desmy-react';
class App extends React.Component {
constructor(props) {
super(props);
}
handleOnClose=()=>{
}
render(){
return (
<>
<DesmyModalContainer data={{title:"Create User"}} onClose={()=>this.handleOnClose()}>
<form method="POST">
<input type="text" placeholder="username"/>
<input type="submit" value="create"/>
</form>
</DesmyModalContainer>
</>
)
}
}
DesmyAuth
usage
A simple authentication utility for managing sessions
and data storage
.
import {DesmyAuth} from 'desmy-react';
// Example usage
DesmyAuth.save('username', 'kekeli');// Save data
DesmyAuth.get('username'); // Output: kekeli
DesmyAuth.remove('username');// Remove data
DesmyAuth.clear();// Clear all data
DesmyAuth.logout();// Logout user
const cookieValue = DesmyAuth.getCookie('session');// Get cookie value
// Save list of data
const dataList = [
{ key: 'username', value: 'kekeli' },
{ key: 'email', value: 'robinsongbaya@desmydev.com' }
];
auth.saveList(dataList, (success) => {
console.log('Data saved successfully:', success);
});
DesmyCommons
usage
A utility library for common
JavaScript tasks.
import {DesmyCommons} from 'desmy-react';
// Example usage
const fileSize = DesmyCommons.getFileSize(myFile);
const extension = DesmyCommons.getExtension('desmydev.txt');
const fileName = DesmyCommons.getFileName('desmydev.txt');
const isValidUrl = DesmyCommons.isValidHttpUrl('https://desmydev.com');
const uniqueId = DesmyCommons.makeUniqueid();
const textFromName = DesmyCommons.nameToText('desmydev');
const randomColor = DesmyCommons.getRandomColor();
const key = DesmyCommons.generateKey();
const concatenated = DesmyCommons.concat('desmy', 'dev');
const isEmptyOrNull = DesmyCommons.isEmptyOrNull(null);
const toStringDefault = DesmyCommons.toStringDefault(123, 'default');
const toStringData = DesmyCommons.toString(123);
const isEmpty = DesmyCommons.isEmpty('');
const passwordsValid = DesmyCommons.validatePasswords('pass1', 'pass1');
const passwordValidation = DesmyCommons.validatePassword('Password1!');
const isNotEmpty = DesmyCommons.isNotEmpty('desmy');
const underscoreToSpace = DesmyCommons.convertUnderscoreToSpaceString('desmy_dev');
const imageDimensions = await DesmyCommons.imageSize(imageBlob);
const capitalized = DesmyCommons.capitalizeEachWord('desmy dev');
const formattedDate = DesmyCommons.formatDateString('2024-05-14');
const emailValid = DesmyCommons.validateEmail('desmydev@gmail.com');
const convertedNumber = DesmyCommons.convertNumber(123);
const daysRemaining = DesmyCommons.daysLeft('2024-12-31');
const customFormattedDate = DesmyCommons.formatDateToCustomFormat(new Date());
const timeAgo = DesmyCommons.getTimeAgoAndCustomDate(new Date());
const roundedData = DesmyCommons.roundTo2dp('3.14159');
19 days ago
19 days ago
27 days ago
27 days ago
27 days ago
27 days ago
27 days ago
27 days ago
27 days ago
27 days ago
27 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago