1.3.5 • Published 1 year ago

minimalist-reactkit v1.3.5

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

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>
   )
}

Table Image

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>

OTP Image

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