Skip to main content

React Commons Collection

React Pakistan​

React Pakistan is an OpenSource & Free Software (FOSS) platform, creating React software solutions for the global community.

React Commons Collection​

A generic, Commons library for React web apps, following modern approach by building your project's UI in isolation using state of the art Storybook along with React.

Install​

Add React Commons Collection to your project:

  yarn add @react-pakistan/react-commons-collection

OR

  npm install @react-pakistan/react-commons-collection

Add React Commons Collection base theme to your project.

  yarn add @react-pakistan/util-functions

OR

  npm install @react-pakistan/util-functions

Styles​

Styled Components are employed to maintain and update theme for this project. Please consider adding Styled Component Provider wrapper to the entry point of your application, following is the sample code. You could either use the default theme as shown below or wire your custom theme object instead. See Typography & Colors being used in the theme object.

  import {ThemeProvider} from 'styled-components';
  import {theme} from '@react-pakistan/util-functions';

  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>

Tested​

We aim to achieve 100% coverage and we shall...

React Commons Collection Badge Branches React Commons Collection Badge Functions React Commons Collection Badge Lines React Commons Collection Badge Statements

Use​

A​

  import { A } from '@react-pakistan/react-commons-collection';

  <A
    color='#000000'
    desktop=''
    download=''
    href='https://google.com'
    hreflang=''
    laptop=''
    laptopL=''
    media=''
    mobileL=''
    mobileM=''
    mobileS=''
    referrerpolicy=''
    rel=''
    tablet=''
    target='_blank'
    type=''
  >
    Go to Google
  </A>

Audio​

  import { Audio } from '@react-pakistan/react-commons-collection';

  <Audio
    autoplay
    controlPanelColor='#F7F7F7'
    controls
    currentTimeColor='#00D3CA'
    desktop=''
    laptop=''
    laptopL=''
    loop={false}
    mobileL=''
    mobileM=''
    mobileS=''
    preload='auto'
    remainingTimeColor='#F62F5E'
    src='https://notificationsounds.com/sound-effects/insight-578/download/mp3'
    tablet=''
  />

Background Image​

  import { BackgroundImage } from '@react-pakistan/react-commons-collection';

  <BackgroundImage
    desktop=''
    imageBackgroundColor='#F7F7F7'
    imageBackgroundHeight='400px'
    imageBackgroundMargin='0'
    imageBackgroundPadding='0'
    imageBackgroundPosition='center center'
    imageBackgroundRepeat='no-repeat'
    imageBackgroundSize='cover'
    imageBackgroundUrl='https://cdn-images-1.medium.com/max/1200/1*y6C4nSvy2Woe0m7bWEn4BA.png'
    imageBackgroundWidth='600px'
    imageBorderRadius='0'
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
  />

Button​

  import { Button } from '@react-pakistan/react-commons-collection';

  <Button
    autoFocus
    border='1px solid #EFEFEF'
    borderRadius='0.5em'
    backgroundColor='#FFFFFF'
    desktop=''
    disabled={false}
    form=''
    formaction=''
    formenctype='text/plain'
    formmethod='get'
    formnovalidate={false}
    formTarget='_blank'
    height='auto'
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    name=''
    onClick={() => onClickHandler}
    padding='1em'
    tablet=''
    type='submit'
    value=''
    width='auto'
  >
    Hello World
  </Button>

Canvas​

  import { Canvas } from '@react-pakistan/react-commons-collection';

  <Canvas
    border='1px solid #000000'
    desktop=''
    height='400px'
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    id='canvasId'
    tablet=''
    width='600px'
  />

Checkbox​

  import { CheckBox } from '@react-pakistan/react-commons-collection';

  <CheckBox
    check={<MiscGrey20 fill='#FFFFFF' fontSize='20px' />}
    checkedColor='#1E90FF'
    desktop=''
    isChecked={true}
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    onChange={onChangeHandler}
    tablet=''
    unCheckedColor='#B4B4B4'
  />

Checkbox with Label​


  <CheckBoxWithFieldLabel
    check={<MiscGrey20 fill='#FFFFFF' fontSize='20px' />}
    checkedColor='#1E90FF'
    desktop=''
    hasError={false}
    helperText='There is an error'
    helperTextColor=''
    isChecked={false}
    label='Pick one'
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    onChange={onChangeHandler}
    tablet=''
    unCheckedColor='#B4B4B4'
  />

ChildGrid​

  import { ChildGrid } from '@react-pakistan/react-commons-collection';

  <ChildGrid
    alignSelf='center'
    desktop=''
    gridColumnEnd={1}
    gridColumnStart={1}
    gridRowEnd={1}
    gridRowStart={1}
    justifySelf='center'
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
  >
    ChildGrid Component
  </ChildGrid>

Color Input​

  import { ColorInput } from '@react-pakistan/react-commons-collection';

  <ColorInput
    desktop=''
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
  />

ColumnContainer​

  import { ColumnContainer } from '@react-pakistan/react-commons-collection';

  <ColumnContainer
    alignItems='center'
    desktop=''
    justifyContent='center'
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
  >
    ColumnContainer Component
  </ColumnContainer>

Date Input​

  import { DateInput } from '@react-pakistan/react-commons-collection';

  <DateInput
    desktop=''
    fontFamily='Roboto'
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
  />

Date Time Input​

  import { DateTimeInput } from '@react-pakistan/react-commons-collection';

  <DateTimeInput
    desktop=''
    fontFamily='Roboto'
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
  />

File Input​

  import { FileInput } from '@react-pakistan/react-commons-collection';

  <FileInput
    desktop=''
    fontFamily='Roboto'
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
  />
  import { Footer } from '@react-pakistan/react-commons-collection';

  <Footer
    desktop=''
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
  >
    Footer component
  </Footer>

Grid​

  import { Grid } from '@react-pakistan/react-commons-collection';

  <Grid
    alignItems='center'
    columnGap='1em'
    desktop=''
    gridColumn='1fr 1fr 1fr'
    gridRow='1fr 1fr'
    height='auto'
    justifyItems='stretch'
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    rowGap='1em'
    tablet=''
    width='100%'
  >
    <h2>
      Item 1
    </h2>
    <h2>
      Item 2
    </h2>
    <h2>
      Item 3
    </h2>
  </Grid>

H1​

  import { H1 } from '@react-pakistan/react-commons-collection';

  <H1
    color='#FFFFFF'
    desktop=''
    fontFamily='Playfair Display'
    fontSize='2em'
    fontWeight={700}
    laptop=''
    laptopL=''
    letterSpacing='1px'
    lineHeight='normal'
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
    textAlign='left'
    textTransform='uppercase'
  >
    H1 Component
  </H1>

H2​

  import { H2 } from '@react-pakistan/react-commons-collection';

  <H2
    color='#FFFFFF'
    desktop=''
    fontFamily='Montserrat'
    fontSize='1.8em'
    fontWeight={700}
    laptop=''
    laptopL=''
    letterSpacing='1px'
    lineHeight='normal'
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
    textAlign='left'
    textTransform='uppercase'
  >
    H2 Component
  </H2>

H3​

  import { H3 } from '@react-pakistan/react-commons-collection';

  <H3
    color='#FFFFFF'
    desktop=''
    fontFamily='Montserrat'
    fontSize='1.6em'
    fontWeight={700}
    laptop=''
    laptopL=''
    letterSpacing='1px'
    lineHeight='normal'
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
    textAlign='left'
    textTransform='uppercase'
  >
    H3 Component
  </H3>

H4​

  import { H4 } from '@react-pakistan/react-commons-collection';

  <H4
    color='#FFFFFF'
    desktop=''
    fontFamily='Montserrat'
    fontSize='1.4em'
    fontWeight={700}
    laptop=''
    laptopL=''
    letterSpacing='1px'
    lineHeight='normal'
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
    textAlign='left'
    textTransform='uppercase'
  >
    H4 Component
  </H4>

H5​

  import { H5 } from '@react-pakistan/react-commons-collection';

  <H5
    color='#FFFFFF'
    desktop=''
    fontFamily='Montserrat'
    fontSize='1.2em'
    fontWeight={700}
    laptop=''
    laptopL=''
    letterSpacing='1px'
    lineHeight='normal'
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
    textAlign='left'
    textTransform='uppercase'
  >
    H5 Component
  </H5>
  import { Header } from '@react-pakistan/react-commons-collection';

  <Header>Header component</Header>

HR​

  import { HR } from '@react-pakistan/react-commons-collection';

  <HR
    border='1px solid #1E90FF' 
    margin='0px'
    padding='0px' 
    width='100%'
  />

Iframe​

  import { Iframe } from '@react-pakistan/react-commons-collection';

  <Iframe
    border='1px solid red'
    desktop=''
    height='600px'
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    name='iframe'
    sandbox='allow-Same-Origin'
    src='http://taimoor.io'
    tablet=''
    width='800px'
  />

Image​

  import { Image } from '@react-pakistan/react-commons-collection';

  <Image
    alt='alt-image'
    desktop=''
    height='auto'
    laptop=''
    laptopL=''
    margin='0'
    mobileL=''
    mobileM=''
    mobileS=''
    padding='0'
    src='https://cdn-images-1.medium.com/max/1200/1*y6C4nSvy2Woe0m7bWEn4BA.png'
    tablet=''
    width='600px'
  />

Li​

  import { Li } from '@react-pakistan/react-commons-collection';

  <Li
    desktop=''
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
  >
    Value
  </Li>

Month Input​

  import { MonthInput } from '@react-pakistan/react-commons-collection';

  <MonthInput
    desktop=''
    fontFamily='Roboto'
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
  />

ProgressBar​

  import { ProgressBar } from '@react-pakistan/react-commons-collection';

  <ProgressBar
    backgroundColorBar='#F62F5E'
    backgroundColorValue='#EFFC90'
    desktop=''
    height='0.25em'
    laptop=''
    laptopL=''
    max='100'
    min='0'
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
    transition='2.5s ease-out'
    value='20'
    width='100%'
  />

RadioButton​

  import { RadioButton } from '@react-pakistan/react-commons-collection';

  <RadioButton
    checked
    tag='Label'
  />

RadioButton with Label​

  import { RadioButtonWithFieldLabel } from '@react-pakistan/react-commons-collection';

  <RadioButtonWithFieldLabel
    checked
    hasError={false}
    helperText='There is an error'
    helperTextColor='#1E90FF'
    label='Pick one'
    tag='Label'
  />

Range Input​

  import { RangeInput } from '@react-pakistan/react-commons-collection';

  <RangeInput
    desktop=''
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
  />

RowContainer​

  import { RowContainer } from '@react-pakistan/react-commons-collection';

  <RowContainer
    alignItems='center'
    desktop=''
    justifyContent='center'
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
  >
    RowContainer Component
  </RowContainer>

Select​

  import { Select } from '@react-pakistan/react-commons-collection';

  <Select
    autoFocus={false}
    disabled={false}
    form='form_id'
    multiple={false}
    name='dropDownName'
    required={false}
    size={0}
  >
    <Option
      value='volvo'
    >
      Volvo
    </Option>
    <Option
      disabled
      value='saab'
    >
      Saab
    </Option>
    <Option
      value='mercedes'
    >
      Mercedes
    </Option>
    <Option
      value='audi'
    >
      Audi
    </Option>
  </Select>

Select with Label​

  import { Select } from '@react-pakistan/react-commons-collection';

  <SelectWithFieldLabel
    autoFocus={false}
    disabled={false}
    form='form_id'
    hasError={false}
    helperText='There is an error'
    helperTextColor='#1E90FF'
    label='Email'
    multiple={false}
    name='dropDownName'
    required={false}
    size={0}
  >
    <Option
      value='volvo'
    >
      Volvo
    </Option>
    <Option
      disabled
      value='saab'
    >
      Saab
    </Option>
    <Option
      value='mercedes'
    >
      Mercedes
    </Option>
    <Option
      value='audi'
    >
      Audi
    </Option>
  </Select>

SocialShare​

  import { SocialShare } from '@react-pakistan/react-commons-collection';

  <SocialShare
    socialIcons={[
      {
        borderRadius: '50%',
        id: 'social-icon-1',
        round: true,
        serviceName: 'facebook',
        shareUrl: 'https://react-commons-collection.surge.sh',
        size: 32,
      },
      {
        borderRadius: '50%',
        id: 'social-icon-2',
        round: true,
        serviceName: 'twitter',
        shareUrl: 'https://react-commons-collection.surge.sh',
        size: 32,
      },
      {
        borderRadius: '50%',
        id: 'social-icon-3',
        round: true,
        serviceName: 'telegram',
        shareUrl: 'https://react-commons-collection.surge.sh',
        size: 32,
      },
      {
        borderRadius: '50%',
        id: 'social-icon-4',
        round: true,
        serviceName: 'whatsapp',
        shareUrl: 'https://react-commons-collection.surge.sh',
        size: 32,
      },
      {
        borderRadius: '50%',
        id: 'social-icon-5',
        round: true,
        serviceName: 'linkedin',
        shareUrl: 'https://react-commons-collection.surge.sh',
        size: 32,
      },
      {
        borderRadius: '50%',
        id: 'social-icon-6',
        round: true,
        serviceName: 'pinterest',
        shareUrl: 'https://react-commons-collection.surge.sh',
        size: 32,
      },
      {
        borderRadius: '50%',
        id: 'social-icon-7',
        round: true,
        serviceName: 'vk',
        shareUrl: 'https://react-commons-collection.surge.sh',
        size: 32,
      },
      {
        borderRadius: '50%',
        id: 'social-icon-8',
        round: true,
        serviceName: 'ok',
        shareUrl: 'https://react-commons-collection.surge.sh',
        size: 32,
      },
      {
        borderRadius: '50%',
        id: 'social-icon-9',
        round: true,
        serviceName: 'reddit',
        shareUrl: 'https://react-commons-collection.surge.sh',
        size: 32,
      },
      {
        borderRadius: '50%',
        id: 'social-icon-10',
        round: true,
        serviceName: 'tumblr',
        shareUrl: 'https://react-commons-collection.surge.sh',
        size: 32,
      },
      {
        borderRadius: '50%',
        id: 'social-icon-11',
        round: true,
        serviceName: 'livejournal',
        shareUrl: 'https://react-commons-collection.surge.sh',
        size: 32,
      },
      {
        borderRadius: '50%',
        id: 'social-icon-12',
        round: true,
        serviceName: 'mailru',
        shareUrl: 'https://react-commons-collection.surge.sh',
        size: 32,
      },
      {
        borderRadius: '50%',
        id: 'social-icon-13',
        round: true,
        serviceName: 'viber',
        shareUrl: 'https://react-commons-collection.surge.sh',
        size: 32,
      },
      {
        borderRadius: '50%',
        id: 'social-icon-14',
        round: true,
        serviceName: 'workplace',
        shareUrl: 'https://react-commons-collection.surge.sh',
        size: 32,
      },
      {
        borderRadius: '50%',
        id: 'social-icon-15',
        round: true,
        serviceName: 'line',
        shareUrl: 'https://react-commons-collection.surge.sh',
        size: 32,
      },
      {
        borderRadius: '50%',
        id: 'social-icon-16',
        round: true,
        serviceName: 'pocket',
        shareUrl: 'https://react-commons-collection.surge.sh',
        size: 32,
      },
      {
        borderRadius: '50%',
        id: 'social-icon-17',
        round: true,
        serviceName: 'instapaper',
        shareUrl: 'https://react-commons-collection.surge.sh',
        size: 32,
      },
      {
        borderRadius: '50%',
        id: 'social-icon-18',
        round: true,
        serviceName: 'email',
        shareUrl: 'https://react-commons-collection.surge.sh',
        size: 32,
      }
    ]}
  />

Spacer​

  import { Spacer } from '@react-pakistan/react-commons-collection';

  <Spacer
    margin='1em 1em 1em 1em'
    padding='0em 0em 0em 0em'
  />

Table​

  import { Table } from '@react-pakistan/react-commons-collection';

  <Table
    data={[
      ['Col1', 'Col2', 'Col3'],
      ['1', '2', '3'],
      ['4', '5', '6'],
      ['7', '8', '9'],
    ]}
    header={true}
  />

Text​

  import { Text } from '@react-pakistan/react-commons-collection';

  <Text
    color='#FFFFFF'
    desktop=''
    fontFamily='Montserrat'
    fontSize='1em'
    fontWeight={400}
    laptop=''
    laptopL=''
    letterSpacing='normal'
    lineHeight='normal'
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
    textAlign='left'
    textTransform='none'
  >
    Text Component
  </Text>

TextArea​

  import { TextArea } from '@react-pakistan/react-commons-collection';

  <TextArea
    autoFocus={false}
    backgroundColor='#FFFFFF'
    border='1px solid #EFEFEF'
    borderRadius='0.5em'
    color='#2E2E2E'
    cols={20}
    desktop=''
    disabled={false}
    fontFamily='Montserrat'
    fontSize='1em'
    fontWeight={400}
    laptop=''
    laptopL=''
    letterSpacing='normal'
    lineHeight='normal'
    maxlength={300}
    minLength={10}
    mobileL=''
    mobileM=''
    mobileS=''
    onChange={(val) => onChangeHandler(val)}
    outlineColor='#1E90FF'
    placeholder='Enter message here'
    placeholderColor='#6C6C6C'
    readOnly={false}
    required={false}
    rows={12}
    tablet=''
    value=''
    wrap='hard'
  />

TextArea with Label​

  import { TextAreaWithFieldLabel } from '@react-pakistan/react-commons-collection';

  <TextAreaWithFieldLabel
    autoFocus={false}
    backgroundColor='#FFFFFF'
    border='1px solid #EFEFEF'
    borderRadius='0.5em'
    color='#2E2E2E'
    cols={20}
    desktop=''
    disabled={false}
    fontFamily='Montserrat'
    fontSize='1em'
    fontWeight={400}
    hasError={false}
    helperText='There is an error'
    helperTextColor='#1E90FF'
    label='Address'
    laptop=''
    laptopL=''
    letterSpacing='normal'
    lineHeight='normal'
    maxlength={300}
    minLength={10}
    mobileL=''
    mobileM=''
    mobileS=''
    onChange={(val) => onChangeHandler(val)}
    outlineColor='#1E90FF'
    placeholder='Enter message here'
    placeholderColor='#6C6C6C'
    readOnly={false}
    required={false}
    rows={12}
    tablet=''
    value=''
    wrap='hard'
  />

TextInput​

  import { TextInput } from '@react-pakistan/react-commons-collection';

  <TextInput
    backgroundColor='#FFFFFF'
    border='1px solid #EFEFEF'
    borderRadius='0.5em'
    desktop=''
    focusBorder='1px solid #1E90FF'
    focusColor='#F62F5E'
    height='3.5em'
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    onChange={(val) => onChangeHandler(val)}
    placeholder='Enter your email here'
    tablet=''
    type='text'
    value=''
    width='100%'
  />

TextInput with Label​

  import { TextInputWithFieldLabel } from '@react-pakistan/react-commons-collection';

  <TextInputWithFieldLabel
    backgroundColor='#FFFFFF'
    border='1px solid #EFEFEF'
    borderRadius='0.5em'
    desktop=''
    focusBorder='1px solid #1E90FF'
    focusColor='#F62F5E'
    hasError={false}
    height='3.5em'
    helperText='There is an error'
    helperTextColor='#1E90FF'
    label='Email'
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    placeholder='Enter your email here'
    tablet=''
    type='text'
    width='100%'
  />

Time Input​

  import { TimeInput } from '@react-pakistan/react-commons-collection';

  <TimeInput
    desktop=''
    fontFamily='Roboto'
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
  />

Ul​

  import { Ul } from '@react-pakistan/react-commons-collection';

  <Ul
    desktop=''
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
  >
    <Li>Value</Li>
  <Ul>

Video​

  import { Video } from '@react-pakistan/react-commons-collection';

  <Video
    autoplay
    controls
    desktop=''
    laptop=''
    laptopL=''
    loop={false}
    mobileL=''
    mobileM=''
    mobileS=''
    muted={false}
    poster='https://upload.wikimedia.org/wikipedia/commons/b/b9/Elephants_Dream_s8_proog.jpg'
    preload='auto'
    src='http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4'
    tablet=''
    width='100%'
  />

Week Input​

  import { WeekInput } from '@react-pakistan/react-commons-collection';

  <WeekInput
    desktop=''
    fontFamily='Roboto'
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
  />

Wrapper​

  import { Wrapper } from '@react-pakistan/react-commons-collection';

  <Wrapper
    desktop=''
    laptop=''
    laptopL=''
    mobileL=''
    mobileM=''
    mobileS=''
    tablet=''
    width='90%'
  >
    Wrapper Component
  </Wrapper>