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
• Features
• Examples

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

Changelog

We're using github release and based on semantic versioning

Author

Marvin Petate

License

ISC