npm package: @rintsin/common-components
Description: Rintsin common components
Latest version: 1.8.0



<div
  style="
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  ">
  <img src="./assets/logo.svg" alt="logo" height="100%" width="auto"/>
</div>

<div
  style="
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  ">
  <a href="https://www.npmjs.com/package/@rintsin/common-components" style="margin: 2px;">
    <img src="https://img.shields.io/npm/v/@rintsin/common-components.svg?style=flat-square" alt="npm" height="100%" width="auto"/>
  </a>
  <a href="https://github.com/JoniRinta-Kahila/commonComponents/actions/workflows/ci.yml" style="margin: 2px;">
    <img src="https://github.com/JoniRinta-Kahila/commonComponents/actions/workflows/ci.yml/badge.svg" alt="ci" height="100%" width="auto"/>
  </a>
</div>
</br>

# [Common-Components-React](https://jonirinta-kahila.github.io/commonComponents)

I have created a library of components that I use frequently. These components are freely available to you. I will update this from time to time if I deem it necessary. It is also allowed to make a pull request if you believe that something needs to be added or corrected. [Here you can find documentation about the library's components](https://jonirinta-kahila.github.io/commonComponents).

<h1>Features</h1>
<div
  style="
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: row;
  ">
  <div
  style="
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    width: 50%;
  ">
  <h2>INPUTS</h2>
  <ul>
    <li>Button</li>
    <li>Checkbox</li>
    <li>Radio buttons</li>
    <li>Sosical media buttons</li>
    <li>Text field</li>
    <li>Text area</li>
  </ul>
  </div>
  <div
  style="
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    width: 50%;
  ">
  <h2>DISPLAY</h2>
  <ul>
    <li>Card</li>
    <li>Collapsible</li>
    <li>Localization</li>
    <li>Modal with prompt feature</li>
    <li>Navbar</li>
    <li>Tooltip</li>
  </ul>
  </div>
    <div
  style="
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    width: 50%;
  ">
    <h2>CONTEXT</h2>
    <ul>
      <li>Modal with prompt feature</li>
    </ul>
  </div>
</div>

</br>

## Installation

```bash
yarn add @rintsin/common-components
# or
npm install @rintsin/common-components --save
```

## example usage

```tsx
import react from 'react';
import { Navbar } from '@rintsin/common-components';

const App: React.FC = () => {
  return (
    <Navbar />  
  )
}
```

### More information in the [documentation](https://jonirinta-kahila.github.io/commonComponents)

</br>
<a href="https://www.buymeacoffee.com/rintsi" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>