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

• Counter
• Dropdown
• HeaderText
• Image
• Indicator
• Input
• Pagination
• Text
• Touchable
• View

Floating Components

• Modal
• Toast

Higher Order Component (HOC)

• connectStyle

Examples

Counter

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

Dropdown

import {Dropdown} from 'vin-react'
...
const App: React.FC = () => {
  return (
    <div>
      <Dropdown
        onChange={selected => console.log(selected)}
        data={[
          {label: 'One', value: 1},
          {label: 'Two', value: 2}
        ]}
      />
    </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>
  )
}

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()
}

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>
  );
};

Touchable

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

View

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

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