minimalist-reactkit

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!