{"id":45102150,"url":"https://github.com/petatemarvin26/vin-react","last_synced_at":"2026-06-05T05:00:54.862Z","repository":{"id":173370393,"uuid":"622574051","full_name":"petatemarvin26/vin-react","owner":"petatemarvin26","description":"This project is a module components exclusive for React Application","archived":false,"fork":false,"pushed_at":"2026-06-01T16:58:16.000Z","size":415,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"prod","last_synced_at":"2026-06-01T18:16:44.788Z","etag":null,"topics":["react","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/petatemarvin26.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-04-02T14:15:00.000Z","updated_at":"2026-06-01T16:59:14.000Z","dependencies_parsed_at":"2026-04-14T05:01:28.685Z","dependency_job_id":null,"html_url":"https://github.com/petatemarvin26/vin-react","commit_stats":{"total_commits":50,"total_committers":2,"mean_commits":25.0,"dds":0.36,"last_synced_commit":"3feb3493d9d414802dcfb9c17025fc835a310f9e"},"previous_names":["petatemarvin26/vin-react"],"tags_count":67,"template":false,"template_full_name":null,"purl":"pkg:github/petatemarvin26/vin-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petatemarvin26%2Fvin-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petatemarvin26%2Fvin-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petatemarvin26%2Fvin-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petatemarvin26%2Fvin-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/petatemarvin26","download_url":"https://codeload.github.com/petatemarvin26/vin-react/tar.gz/refs/heads/prod","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petatemarvin26%2Fvin-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33930311,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-05T02:00:06.157Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","webpack"],"created_at":"2026-02-19T20:51:21.691Z","updated_at":"2026-06-05T05:00:54.843Z","avatar_url":"https://github.com/petatemarvin26.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## VIN-REACT\n\nVIN-REACT is a React component library built around simple, flexbox-first UI primitives and lightweight floating overlays.\n\n## Table Contents\n\n- [Installation](#installation)\n- [Features](#features)\n- [Examples](#examples)\n\n## Installation\n\n```shell\nnpm install vin-react\n```\n\n## Features\n\n#### Components\n\n- Checkbox\n- Dropdown\n- Header\n- Indicator\n- InputText\n- Pagination\n- Text\n- Touchable\n- View\n\n#### Floating Components\n\n- Modal\n- Toast\n\n## Examples\n\n##### `Checkbox`\n\n```tsx\nimport {Checkbox} from 'vin-react';\n\nconst App: React.FC = () =\u003e {\n  const [checked, setChecked] = useState(false);\n\n  return (\n    \u003cdiv\u003e\n      \u003cCheckbox label='Accept terms' value={checked} onChange={setChecked} /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n##### `Dropdown`\n\n```tsx\nimport {Dropdown} from 'vin-react';\n\nconst items = [\n  {label: 'One', value: 1},\n  {label: 'Two', value: 2}\n];\n\nconst App: React.FC = () =\u003e {\n  const [selected, setSelected] = useState(items[0]);\n\n  return (\n    \u003cdiv\u003e\n      \u003cDropdown\n        items={items}\n        selected={selected}\n        onSelect={(item) =\u003e setSelected(item)}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n##### `Indicator`\n\n```tsx\nimport {Indicator} from 'vin-react';\n\nconst App: React.FC = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cIndicator.Bar width={250} height={10} cornerStyle='round' animating /\u003e\n      \u003cIndicator.Bar width={250} height={10} progress={0.5} /\u003e\n      \u003cIndicator.CircleSnail\n        size={100}\n        thickness={10}\n        cornerStyle='round'\n        animating\n      /\u003e\n      \u003cIndicator.CircleSnail size={100} thickness={10} progress={0.5} /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n##### `InputText`\n\n```tsx\nimport {InputText} from 'vin-react';\n\nconst App: React.FC = () =\u003e {\n  const [value, setValue] = useState('');\n\n  return (\n    \u003cdiv\u003e\n      \u003cInputText placeholder='Enter text' onChangeText={setValue} /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n##### `Pagination`\n\n```tsx\nimport {Pagination} from 'vin-react';\n\nconst App: React.FC = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cPagination totalPages={10} maxDisplay={5} fontSize='1rem' /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n##### `Touchable`\n\n```tsx\nimport {Touchable} from 'vin-react';\n\nconst App: React.FC = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cTouchable onClick={() =\u003e console.log('CLICK')}\u003eClick Me\u003c/Touchable\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n##### `View`\n\n```tsx\nimport {View} from 'vin-react';\n\nconst App: React.FC = () =\u003e {\n  return (\n    \u003cView className='container'\u003e\n      \u003cp\u003eContent inside a View\u003c/p\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\n##### Floating\n\n```tsx\nimport {Modal, Toast} from 'vin-react';\n\nconst App: React.FC = () =\u003e {\n  return (\n    \u003cModal.Provider\u003e\n      \u003cToast.Provider\u003e\n        \u003cYourApp /\u003e\n      \u003c/Toast.Provider\u003e\n    \u003c/Modal.Provider\u003e\n  );\n};\n\nconst YourApp: React.FC = () =\u003e {\n  const {showModal} = useContext(Modal.Context);\n  const {showToast} = useContext(Toast.Context);\n\n  showModal(\u003cMyModal /\u003e);\n  showToast('Hello World!', {title: 'INFO'});\n};\n```\n\n\u003e NOTE: Wrap your app with `Modal.Provider` and `Toast.Provider` so floating overlays render correctly.\n\n## Contributing\n\nUnfortunately 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\n\n## Changelog\n\nWe're using github [release][github-release] and based on [semantic versioning][semantic-version]\n\n## Author\n\n[Marvin Petate][marvin-petate]\n\n## License\n\n[ISC][license]\n\n[ws]: https://www.npmjs.com/package/ws\n[nodejs]: https://nodejs.org/en\n[github-release]: https://github.com/petatemarvin26/vin-react/releases\n[license]: ./LICENSE\n[semantic-version]: https://semver.org/\n[marvin-petate]: https://marvin-petate.web.app\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpetatemarvin26%2Fvin-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpetatemarvin26%2Fvin-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpetatemarvin26%2Fvin-react/lists"}