minimalist-reactkit
v1.3.5
Published
Lightweight, flexible and highly customizable reusable components for React-devs designed for easy integration into your projects, providing a clean and modern aesthetic.
Downloads
8
Maintainers
Readme
Minimlist Reactkit
🎉 Minimalist Reactkit provides you with easily restyable components
Documentation
Check the documentation to get you started!
Installation
npm i minimalist-reactkit
yarn add minimalist-reactkit
How To Use
import React from 'react';
import { BtnPrimary } from 'minimalist-reactkit';
import 'minimalist-reactkit/index.css'; // add to root file
function App(){
return (
<div>
<BtnPrimary>Click Me</BtnPrimary>
</div>
);
}
Check out Our Select Component
import React, {useState} from 'react';
import { Select } from 'minimalist-reactkit'; // flexible react select
import 'minimalist-reactkit/index.css'; // add to root file
function App(){
const [car, setCar] = useState({label:"Honda", value:"hda"})
const carOptions = [
{label:"Honda", value:"hda"},
{ label:<span>Toyota</span>, value: "tyt" } // you can also use jsx as label and style as see fit
]
const handleSelectChange = (selected: any, name: string) => {
setCar(selected)
}
return (
<Select
name="car"
label="Select Car Choice"
isSearchable={true}
defaultValue={car}
options={carOptions}
handleChange={handleSelectChange}
/>
);
}
Check Out Our Datatables
import {Table} from 'minimalist-reactkit';
import 'minimalist-reactkit/index.css';
const tableData = [
{ name: 'Godwin Emmanuel', status: <Pill text='Ongoing' className='warning' />, flightId: 'T2089392BJ9', trip: 'Dubai (DXB) - Lagos (LOS)', action: <a>View</a> },
{ name: 'Clara Kaio', status: <Pill text='Ongoing' className='warning' />, flightId: 'T2089392BJ9', trip: 'Dubai (DXB) - Lagos (LOS)', action: <a>View</a> },
{ name: 'Joseph Tabina', status: <Pill text='Ongoing' className='warning' />, flightId: 'T2089392BJ9', trip: 'Dubai (DXB) - Lagos (LOS)', action: <a>View</a> },
]
USAGE 1
<Table
head={['Applicant Name', 'Status', 'Booking Id', 'Destination', 'Action']}
accessor={['name', 'status', 'flightId', 'trip', '']} // if sortable column is needed
body={tableData}
/>
USAGE 2
<Table
head={['Applicant Name', 'Status', 'Booking Id', 'Destination', 'Action']}
accessor={['name', 'status', 'flightId', 'trip', '']}
body={tableData}
isRow = {true}
Row={TableRow}
rowProps={{ currentTime: '24h' }} // pass props to row component
/>
const TableRow = ({data}:any) => { // data is passed by default
return(
<tr>
<td>{data.name}</td>
<td>{data.status}</td>
<td>{data.flightId}</td>
<td>{data.trip}</td>
<td>{data.action}</td>
</tr>
)
}
Check Out Our OTP Input
import {OTPInput} from 'minimalist-reactkit';
import 'minimalist-reactkit/index.css';
const [otp, setOtp] = useState<string>('');
const handleChange = (otp: string) => {
setOtp(otp);
};
// by default it gives 6 otp inputs
<OTPInput num={8} getOTP={handleChange}/>
Add Validation (Works for all forms)
import {OTPInput, Form} from 'minimalist-reactkit';
<Form onSubmit={...}>
<OTPInput num={8}/>
</Form>
Documentation
Check the documentation to get you started!