Components-client-blog

Components to use in the project modsen-client-blog

Demo

Online demo is also available! you can run demo on your local with:

• git clone https://github.com/denbarabraza/components-client-blog.git
• yarn && yarn run storybook
• Visit http://localhost:6006/

Getting started

Compatibility

Your project needs to use React 16 or later. If you use older version of React.

Installation

npm install components-client-blog

yarn add components-client-blog

User guide

Loader

Loader for an application with the ability to set the background color and the loader itself

Example:

import React from 'react';
import { Loader as RootLoader } from 'components-client-blog';

export default function Loader() {
  return (
    <RootLoader
      borderTopColor='#5a34a9'
      borderColor='#eec14a'
      backgroundColorContainer='#e5e5e5ff'
    />
  );
}

Props:

  backgroundColorContainer: string;
  borderColor: string;
  borderTopColor: string;

Button

A button with the ability to transfer different props (see props)

Example:

...
import { Button } from 'components-client-blog';

const HomeHeader = () => {
 
  ...

  return (
    <div className={styles.wrapper} style={backgroundStyle}>
      ....
        <Link href={`/blogPost/${id}`}>
          <Button title={t('Home.aboutButton')} isValid />
        </Link>
      </div>
    </div>
  );
};

export default HomeHeader;

Props:

  type?: 'submit' | 'button';
  dataCy?:string;
  title: string;
  backgroundColor: string;
  hoverColor: string;
  isValid: boolean;
  callBack?: () => void;

BurgerMenu

Burger Menu with a choice of values open and closed(true/false

Example:

...

import { BurgerMenu } from 'components-client-blog';

export const MenuHeader: FC<IMenuHeader> = ({ locale }) => {
  ...

  return (
    <div ref={node}>
     ...
      <BurgerMenu open={open} handleMenuOpen={handleMenuOpen} />
    </div>
  );
};

Props:

 open: boolean;
  handleMenuOpen: () => void;

Input

Example:

...

import { Input } from 'components-client-blog';

export const Main = () => {
  ...

  return (
    <div ref={node}>
     ...
      <InputItem
        borderColor = '#0000007F',
        focusColor='#fbd050',
        placeholder={'Enter value'}
        value={value}
        onChange={onChange}
        data-cy={dataCy}
      />
    </div>
  );
};

Props:

  placeholder: string,
  value: string
  onChange: () => void
  dataCy: string
  borderColor: string
  focusColor: string

APIs

For Loader, Button, BurgerMenu, and Input,