1.3.5 ⢠Published 1 year ago
minimalist-reactkit v1.3.5
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!
1.3.5
1 year ago
1.3.4
1 year ago
1.3.3
1 year ago
1.3.2
1 year ago
1.3.1
1 year ago
1.3.0
1 year ago
1.2.9
1 year ago
1.2.8
1 year ago
1.2.7
1 year ago
1.2.6
1 year ago
1.2.5
1 year ago
1.2.4
2 years ago
1.2.0
2 years ago
1.1.9
2 years ago
1.1.8
2 years ago
1.1.7
2 years ago
1.1.6
2 years ago
1.2.3
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.1.5
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago
0.0.0
2 years ago