Vin-react NPM | npm.io

VIN-REACT

is React library that focus the simplest way to use component and utilize the powerful of Flexbox, Cutomizable and Simplicity.

Table Contents

Installation

npm install --save vin-react

Features

Components

Button
Counter
HeaderText
Image
Indicator
Input
Pagination
Text
View

Floating Components

Modal
Toast

Higher Order Component (HOC)

connectStyle

Examples

`Button`

import {Button} from 'vin-react'
...
const App: React.FC = () => {
  return (
    <div>
      <Button onClick={() => console.log('CLICK')}>Click Me</Button>
      <Button title="Click Me" onClick={() => console.log('CLICK')}/>
    </div>
  )
}

`Counter`

import {Counter} from 'vin-react'
...
const App: React.FC = () => {
  return (
    <div>
      <Counter
        max={10}
        onChange={nextNum => console.log(nextNum)}
      />
    </div>
  )
}

`Indicator`

import {Indicator} from 'vin-react'
...
const App: React.FC = () => {
  return (
    <div>
      <Indicator.Bar
        width={250}
        height={10}
        cornerStyle='round'
        animating
      />
      <Indicator.Bar width={250} height={10} progress={0.5} />
      <Indicator.CircleSnail
        size={100}
        thickness={10}
        cornerStyle='round'
        animating
      />
      <Indicator.CircleSnail size={100} thickness={10} progress={0.5} />
    </div>
  )
}

`View`

import {View} from 'vin-react'
...
const App: React.FC = () => {
  const myview = useRef<HTMLDivElement>();
  return (
    <View reference={ref => (myview.current = ref)}>
      <button>CLICK ME!</button>
    </View>
  )
}

`Pagination`

import {Pagination} from 'vin-react'
...
const App: React.FC = () => {
  return (
    <div>
      <Pagination
        maxPageDisplay={5}
        totalData={15}
        currentPage={2}
        onPageChange={(page, e) => {
          console.log(page, e);
        }}
      />
    </div>
  );
};

`Modal`

// index.tsx
import {createRoot} from 'react-dom/client';
import {Modal} from 'vin-react';

const rootEl = document.getElementById('root');
const container = createRoot(rootEl)

container.render(
  <Modal.Provider>
    <App/>
  </Modal.Provider>
)

// App.tsx
const {showModal, hideModal} = useConext(Modal.Context);
const handleShowModal = () => {
  showModal(
    <div>
      <p>HI, THIS IS MODAL</p>
    </div>
  )
}
const handleHideModal = () => {
  hideModal()
}

`connectStyle`

// MyButton.tsx
import {ConnectStyleProps, connectStyle} from 'vin-react';
import styles from './styles.scss';

type Props = {
  children: any;
} & ConnectStyleProps;

const MyButton: React.FC<Props> = ({children, classNames = () => ''}) => {
  const btnStyle = classNames(
    'green',
    {red: undefined}, // display the red by default
    {red: false}, // will not display red if value false
    ['yellow']
  );

  return (
    <button className={btnStyle}>
      <p>{children}</p>
    </button>
  );
};
export default connectStyle(styles)(MyButton);

Contributing

Unfortunately we are not accepting any contributors yet this is under probitionary, but for your concerns and possible suggestions you may raise the issue on our github