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 vin-react

Features

Components

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

Floating Components

• Modal
• Toast

Hooks

• useModal
• useToast

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

Image

import {Image} from 'vin-react'
...
const App: React.FC = () => {
  const [imgProg, setImgProgress] = useState<number>(0)
  return (
    <div>
      <p>Image render {imgProg}</p>
      <Image
        src='https://somewhere.com/yourimage.png'
        onLoading={setImgProgress}
      />
    </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>
  )
}

Input

import {Input, Indicator} from 'vin-react'
...
const App: React.FC = () => {
  return (
    <div>
      <Input
        placeholder='password'
        prefixComponent={<LockIcon/>}
        suffixComponent={<Indicator 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
import {useModal} from 'vin-react';

const [showModal, hideModal] = useModal();
const handleShowModal = () => {
  showModal(
    <div>
      <p>HI, THIS IS MODAL</p>
    </div>,
    { isClosableOutside: false }
  )
}
const handleHideModal = () => {
  hideModal()
}

NOTE: Make sure the Modal Provider is at the hierarchy position of DOM

Toast

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

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

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

// App.tsx
import {useToast} from 'vin-react';

const [showToast] = useToast();
const handleShowToast = () => {
  showModal('This is a toast!')
}

NOTE: Make sure the Toast Provider is at the hierarchy position of DOM

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