This project contains "a couple" of React Components written in TypeScript and using the fantastic emotion js.
EXAMPLE: RcLayout
import { useState } from 'react';
import { Router } from '@reach/router';
import { useMediaQuery } from 'react-responsive';
import { HomePage } from './pages';
import { Footer, Header, SideBar, Warning } from './components';
import { RcLayout, RcSideNav } from './rcomps';
export const App: React.FC = () => {
const [showLeftMenu, setShowLeftMenu] = useState(false);
const isNarrow = useMediaQuery({ maxWidth: 600 });
const warning = <Warning />;
const header = <Header setShowLeftMenu={setShowLeftMenu} />;
const footer = <Footer />;
const sidebar = <SideBar />;
const leftMenu = (
<RcSideNav onClose={() => setShowLeftMenu(false)}>
<SideBar />
</RcSideNav>
);
const main = (
<Router>
<HomePage path="/" />
</Router>
);
return (
<RcLayout
warning={warning}
header={header}
sidebar={sidebar}
main={main}
footer={footer}
leftMenu={leftMenu}
showSideBar={!isNarrow}
showLeftMenu={showLeftMenu}
/>
);
};
EXAMPLE: RcMedia
export const Default: React.FC = () => (
<RcMedia
phone={<Helper bgColor="#cecece">PHONE</Helper>}
tablet={<Helper bgColor="#ffcdcd">TABLET</Helper>}
landscape={<Helper bgColor="#cdd1ff">LANDSCAPE</Helper>}
desktop={<Helper bgColor="#d7ffcd">DESKTOP</Helper>}
/>
);
EXAMPLE: RcInput
export const Password: React.FC = () => {
const [value, setValue] = useState('1234-5678');
const [show, setShow] = useState(false);
const icon = (
<div onClick={() => setShow(!show)}>
{show ? <IconEye size="18px" /> : <IconEyeNo size="18px" />}
</div>
);
return (
<RcInput
label="Password"
password={!show}
value={value}
suffix={icon}
onChange={(e) => setValue(e.target.value)}
/>
);
};
See a script to create an app using rcomps (calling create-react-app)..
yarn add @cpmech/rcomps
We export the components as pure TypeScript because emotion needs to be transpiled in the final application.
So you'll have to copy the components to your project. However, we suggest the following strategy:
"postinstall": "bash ./scripts/npm_postinstall.bash"
./scripts/npm_postinstall.bash
:#!/bin/bash
set -e
if [[ -d "./node_modules/@cpmech/rcomps/rcomps" ]]; then
echo ">>> moving rcomps to src <<<"
rm -rf ./src/rcomps
mv ./node_modules/@cpmech/rcomps/rcomps ./src/
fi
The components are organized into three kinds:
All components have the prefix Rc.
Foundation
RcButton
-- a fancy button, wrapping HTML input buttonRcCard
-- a fancy cardRcChartRing
-- "donut" style of graphRcCollapse
-- hide/show contentRcError
-- print in red errors, useful to forms (and RcInput)RcGameCard
-- a card with zoomRcInput
-- a fancy input box, wrapping HTML inputRcLinkOrDiv
-- wrapps HTML "a" (link) or a div with onClickRcNotifier
-- shows a box at the botton of the screenRcPair
-- positions two items side-by-sideRcPicker
-- a fancy pickerRcProgress
-- shows a linear progress barRcSpinCircle
-- shows a spinning circleRcSpinDots
-- shows spinning dotsRcSwitch
-- implements a toggle/switchRcText
-- a fancy static input box, wrapping HTML inputLayout
RcLayout
-- implements the "holy grail" layout using HTML gridRcMedia
-- implements components for a "responsive design" (e.g. RcMediaPhone, etc.)RcMenuHoriz
-- shows a horizontal menuRcMenuVert
-- shows a vertical menuRcModal
-- shows a modal boxRcSideNav
-- implements a floating side navigation boxRcTabs
-- shows a tabbed menuRcYouTube
-- shows a YouTube video, in a consistent and easy wayComposite
RcCenterPage
-- position something at the center of the page, horizontally and verticallyRcDualMenuHoriz
-- presents two sets of horizontal menus (left and right)RcFlexTable
-- shows a (long) table while being flexible for narrow and wide screensRcInputDate
-- implements a (powerful) input box for dates (with translation)RcInputNumber
-- implements an input box for numbers (with locales)RcModalYesNo
-- shows a modal box, with buttons yes/noRcPairLinkOrDiv
-- pair up left with right, horizontaly, and make a clickable link or divRcPopup
-- shows "popup" modal boxes, for different uses (message, error, is-loading, progress)RcProgressBar
-- shows a progress bar in a containerRcReadyOrErrorPopup
-- shows a "popup" modal with a spinner, if not ready, or with an error message, if anyRcSpinAndMsgCircle
-- shows a spinning cirlce and a messageRcSpinAndMsgDots
-- shows spinning dots and a messageRcSpinnerPage
-- shows a spinning circle in the middle of the pageRcSwitchAndText
-- shows a switch (toggle) component with a text to the left or rightWe divide the width of screens/areas into four categories (see rcSizes in RcMedia.tsx):
These can be changed, for example (after importing rcConfig
from layout/rcConfig.tsx
):
rcConfig.media.phone.maxWidth = 400;
rcConfig.media.tablet.maxWidth = 600;
rcConfig.media.landscape.maxWidth = 800;
NOTE: the maxWidth values should be in an increasing order.
The following components are defined:
RcMediaPhone
and RcMediaNotPhone
RcMediaTablet
and RcMediaNotTablet
RcMediaLandscape
and RcMediaNotLandscape
RcMediaDesktop
and RcMediaNotDesktop
We also create the following groups:
RcMediaMobile
which includes phone and tablet; andRcMediaNotMobile
which includes landscape and desktop (even though landscape could be a rotated tablet)The following auxiliary components are also defined:
RcMediaPhoneOrNot
: phone or (tablet,landscape,desktop)RcMediaMobileOrNot
: (phone,tablet) or (landscape,desktop)See the storybook: Layout/RcMedia (play with it by resizing the panels)
See article about the publishing procedure.
Important: If using ncu -u
, keep the following versions fixed:
"babel-loader": "8.1.0",
"jest": "26.6.0",