https://github.com/petatemarvin26/vin-react
This project is a module components exclusive for React Application
https://github.com/petatemarvin26/vin-react
react webpack
Last synced: about 1 month ago
JSON representation
This project is a module components exclusive for React Application
- Host: GitHub
- URL: https://github.com/petatemarvin26/vin-react
- Owner: petatemarvin26
- License: isc
- Created: 2023-04-02T14:15:00.000Z (over 3 years ago)
- Default Branch: prod
- Last Pushed: 2026-06-01T16:58:16.000Z (about 1 month ago)
- Last Synced: 2026-06-01T18:16:44.788Z (about 1 month ago)
- Topics: react, webpack
- Language: TypeScript
- Homepage:
- Size: 405 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## VIN-REACT
VIN-REACT is a React component library built around simple, flexbox-first UI primitives and lightweight floating overlays.
## Table Contents
- [Installation](#installation)
- [Features](#features)
- [Examples](#examples)
## Installation
```shell
npm install vin-react
```
## Features
#### Components
- Checkbox
- Dropdown
- Header
- Indicator
- InputText
- Pagination
- Text
- Touchable
- View
#### Floating Components
- Modal
- Toast
## Examples
##### `Checkbox`
```tsx
import {Checkbox} from 'vin-react';
const App: React.FC = () => {
const [checked, setChecked] = useState(false);
return (
);
};
```
##### `Dropdown`
```tsx
import {Dropdown} from 'vin-react';
const items = [
{label: 'One', value: 1},
{label: 'Two', value: 2}
];
const App: React.FC = () => {
const [selected, setSelected] = useState(items[0]);
return (
setSelected(item)}
/>
);
};
```
##### `Indicator`
```tsx
import {Indicator} from 'vin-react';
const App: React.FC = () => {
return (
);
};
```
##### `InputText`
```tsx
import {InputText} from 'vin-react';
const App: React.FC = () => {
const [value, setValue] = useState('');
return (
);
};
```
##### `Pagination`
```tsx
import {Pagination} from 'vin-react';
const App: React.FC = () => {
return (
);
};
```
##### `Touchable`
```tsx
import {Touchable} from 'vin-react';
const App: React.FC = () => {
return (
console.log('CLICK')}>Click Me
);
};
```
##### `View`
```tsx
import {View} from 'vin-react';
const App: React.FC = () => {
return (
Content inside a View
);
};
```
##### Floating
```tsx
import {Modal, Toast} from 'vin-react';
const App: React.FC = () => {
return (
);
};
const YourApp: React.FC = () => {
const {showModal} = useContext(Modal.Context);
const {showToast} = useContext(Toast.Context);
showModal();
showToast('Hello World!', {title: 'INFO'});
};
```
> NOTE: Wrap your app with `Modal.Provider` and `Toast.Provider` so floating overlays render correctly.
## 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][github-release] and based on [semantic versioning][semantic-version]
## Author
[Marvin Petate][marvin-petate]
## License
[ISC][license]
[ws]: https://www.npmjs.com/package/ws
[nodejs]: https://nodejs.org/en
[github-release]: https://github.com/petatemarvin26/vin-react/releases
[license]: ./LICENSE
[semantic-version]: https://semver.org/
[marvin-petate]: https://marvin-petate.web.app