README
c5-react-library
Simple Library containing toggles, modals, form components, and an iOS Date Picker component for Web Apps.
Install
npm install --save c5-react-library
Usage
import React, { useState, useEffect, useRef } from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.css";
import {
ModalDatePicker,
Switcher,
Slider,
useModal,
Modal,
Picker
} from "c5-react-library";
import "./Modal.css";
import "./Picker.css";
const fakeStores = [
{ id: 1, description: "Store 001" },
{ id: 2, description: "Store 002" },
{ id: 3, description: "Store 003" },
{ id: 4, description: "Store 004" },
{ id: 5, description: "Store 005" },
{ id: 6, description: "Store 006" },
{ id: 7, description: "Store 007" },
{ id: 8, description: "Store 008" },
{ id: 9, description: "Store 009" },
{ id: 10, description: "Store 010" },
{ id: 11, description: "Store 011" },
{ id: 12, description: "Store 012" },
{ id: 13, description: "Store 013" },
{ id: 14, description: "Store 014" },
{ id: 15, description: "Store 015" },
{ id: 16, description: "Store 016" }
];
const fakeGroups = [
{ id: 1, groupname: "My Group 1" },
{ id: 2, groupname: "Ace" },
{ id: 3, groupname: "Saver Group" },
{ id: 4, groupname: "Priceless" },
{ id: 5, groupname: "Group with Really Long Name" },
{ id: 6, groupname: "Gas Stores" },
{ id: 7, groupname: "Crossroads" }
];
const App = () => {
const [time, setTime] = useState(new Date());
const [isOpen, setIsOpen] = useState(false);
const [groups, showGroups] = useState(false);
const [stores, showStores] = useState(false);
const { isShowing, toggle } = useModal(useState);
const handleOpenDatePicker = () => {
setIsOpen(!isOpen);
};
const handleDateSelect = time => {
setTime(time);
setIsOpen(false);
};
const handleCloseDatePicker = () => {
setIsOpen(false);
};
const handleSwitcherCallback = e => {
if (e === true) {
showStores(true);
} else {
showGroups(true);
}
};
const toggleShowGroups = () => {
showGroups(!groups);
};
const toggleShowStores = () => {
showStores(!stores);
};
const handleSelectGroup = g => {
console.log(g);
showGroups(false);
};
const handleSelectStore = s => {
console.log(s);
showStores(false);
};
const formatDate = date => {
var testDate = new Date(date),
month = testDate.getMonth() + 1,
day = testDate.getDate(),
year = testDate.getFullYear();
return month + "/" + day + "/" + year;
};
return (
<div className="container-fluid p-4">
<div className="text-center w-100 mt-3">
<h3>c5-react-library kitchen sink</h3>
</div>
<hr />
<div className="text-center my-3">
<h3>Basic Toggles</h3>
</div>
<div className="row justify-content-center text-center">
<div className="col-sm-12 col-md-6 mt-4">
<Slider />
</div>
<div className="col-sm-12 col-md-6 mt-4">
<Switcher
label1="Groups"
label2="Stores"
changeCallback={handleSwitcherCallback}
instructions="Here you can put some instructions to help your users"
/>
</div>
</div>
<div className="mt-4">
<hr />
</div>
<h3 className="w-100 text-center">Date Picker</h3>
<div className="row justify-content-center mt-3">
<div className="col-sm-12 col-md-6 text-center mt-2">
<button
className="btn btn-outline-dark"
onClick={handleOpenDatePicker}
>
Select Date
</button>
</div>
<div className="col-sm-12 col-md-6 text-center mt-2">
<input type="text" value={formatDate(time)} readOnly={true} />
</div>
</div>
<ModalDatePicker
value={time}
isOpen={isOpen}
onSelect={handleDateSelect}
onCancel={handleCloseDatePicker}
/>
<hr />
<div className="row justify-content-center">
<button className="button-default" onClick={toggle}>
Show Modal
</button>
<Modal isShowing={isShowing} hide={toggle} header="Heres my header">
<div>
<h3>I am a Modal</h3>
</div>
</Modal>
</div>
<hr />
<div className="row justify-content-center">
<button className="btn btn-outline-dark" onClick={toggleShowGroups}>
Show Store Picker
</button>
<Picker
isShowing={groups}
hide={toggleShowGroups}
header="groups"
store={fakeGroups}
displayField="groupname"
valueField="id"
handleSelect={handleSelectGroup}
useEffect={useEffect}
useState={useState}
useRef={useRef}
/>
</div>
<div className="row justify-content-center">
<Picker
isShowing={stores}
hide={toggleShowStores}
header="Stores"
store={fakeStores}
displayField="description"
valueField="id"
handleSelect={handleSelectStore}
useEffect={useEffect}
useState={useState}
useRef={useRef}
/>
</div>
<hr />
<p className="text-center mt-3">
These are the current widgets that I have designed. More will come soon,
so keep coming back and checking out the work.
</p>
</div>
);
};
export default App;
Here are some Screenshots of the Components
Here is a component that I found online, but couldn't get it to work, so I did a little work to it. Here is the orginal link to the component: https://www.npmjs.com/package/react-mobile-datepicker. At some point, I am going to try and convert this to all function components because some of the lifecycle methods have been deprecated.
License
MIT © C5m7b4