{"id":14988706,"url":"https://github.com/minivera/react-vitae","last_synced_at":"2025-04-12T00:22:59.046Z","repository":{"id":30671395,"uuid":"125685748","full_name":"Minivera/react-vitae","owner":"Minivera","description":"Connect resumes written in JSON with Resume.json and React","archived":false,"fork":false,"pushed_at":"2024-06-24T19:40:15.000Z","size":5263,"stargazers_count":21,"open_issues_count":14,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T14:52:34.378Z","etag":null,"topics":["bulma-css","cv","hacktoberfest","javascript","json-resume","react","reactjs","resume","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Minivera.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"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}},"created_at":"2018-03-18T02:21:20.000Z","updated_at":"2024-06-24T19:40:18.000Z","dependencies_parsed_at":"2024-06-24T21:18:25.331Z","dependency_job_id":"0393e3e5-6b34-4ec6-a7dc-2bbbeb012c81","html_url":"https://github.com/Minivera/react-vitae","commit_stats":{"total_commits":228,"total_committers":7,"mean_commits":32.57142857142857,"dds":"0.45175438596491224","last_synced_commit":"e7d6b5eac0cb0cdd14cf9fa2820807a43b014c6f"},"previous_names":["minivera/react-bulma-vitae"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Minivera%2Freact-vitae","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Minivera%2Freact-vitae/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Minivera%2Freact-vitae/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Minivera%2Freact-vitae/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Minivera","download_url":"https://codeload.github.com/Minivera/react-vitae/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248498436,"owners_count":21114124,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["bulma-css","cv","hacktoberfest","javascript","json-resume","react","reactjs","resume","typescript"],"created_at":"2024-09-24T14:17:04.778Z","updated_at":"2025-04-12T00:22:59.011Z","avatar_url":"https://github.com/Minivera.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React vitae\n![GitHub](https://img.shields.io/github/license/minivera/react-vitae.svg)\n![GitHub stars](https://img.shields.io/github/stars/minivera/react-vitae.svg?style=social)\n[![Build Status](https://travis-ci.com/Minivera/react-vitae.svg?branch=master)](https://travis-ci.com/Minivera/react-vitae)\n[![codecov](https://codecov.io/gh/Minivera/react-vitae/graph/badge.svg?token=QnUMjBaLK3)](https://codecov.io/gh/Minivera/react-vitae)\n\n`react-vitae` is a set of strongly typed and battle tested React components and hooks that enable you to connect a [json-resume](https://github.com/jsonresume/resume-schema) schema to your components and build great looking resumes from a standardized schema. \n\n## Installation\n\nYou can install `react-vitae` with NPM or Yarn.\n\n`npm install --save react-vitae` or `yarn add react-vitae`\n\n## Usage\n\nThe main `react-vitae` package includes the [TypeScript types](src/types.ts) for the standard JSON resume schema and a set of components.\n\n### Writing the resume file\n\nThe JSON resume repo provides all the tools to create and validate your resume file.\n\nIf using TypeScript, you can use the type suggestion and auto-completion feature of your IDE to create the schema using the provided types.\n\n```typescript\nimport { Resume } from 'react-vitae';\n\nconst resume: Resume = {};\n```\n\n### The resume provider\n\nThe components need the resume file to be provided at the root of your application, if you have used `redux` or `react-router` before, this pattern should be familiar.\n\n```jsx\nimport { ResumeProvider } from 'react-vitae';\n\nconst resume = {};\n\nexport const App = () =\u003e (\n    \u003cResumeProvider resume={resume}\u003e\n        {/* Your application goes here */}\n    \u003c/ResumeProvider\u003e\n);\n```\n\n### Using hooks\n\nThe package exports a set of custom hooks to retrieve the resume or part of it.\n\n- `useResume` retrieves the main [resume](src/types.ts#L232).\n- `useBasic` retrieves the [basic resume information](src/types.ts#L29).\n- `useWork` retrieves the [work experiences](src/types.ts#L58).\n- `useVolunteer` retrieves the [volunteer experiences](src/types.ts#L87).\n- `useEducation` retrieves the [education information](src/types.ts#L110).\n- `useAwards` retrieves the [list of awards](src/types.ts#L133).\n- `usePublications` retrieves the [list of publications](src/types.ts#L147).\n- `useSkills` retrieves the [list of skills](src/types.ts#L164).\n- `useLanguages` retrieves the [list of languages](src/types.ts#L175).\n- `useInterests` retrieves the [list of interests](src/types.ts#L183).\n- `useReferences` retrieves the [list of professional references](src/types.ts#L191).\n- `useProjects` retrieves the [list of projects](src/types.ts#L200).\n\nAll have the same signature: `useElement(): type` and return type specific type they represent.\n\n### Using Higher-Order components\n\nThe package exports a set of hocs to retrieve the resume or part of it and inject them in an augmented component.\n\n- `withResume` retrieves the main [resume](src/types.ts#L232).\n- `withBasic` retrieves the [basic resume information](src/types.ts#L29).\n- `withWork` retrieves the [work experiences](src/types.ts#L58).\n- `withVolunteer` retrieves the [volunteer experiences](src/types.ts#L87).\n- `withEducation` retrieves the [education information](src/types.ts#L110).\n- `withAwards` retrieves the [list of awards](src/types.ts#L133).\n- `withPublications` retrieves the [list of publications](src/types.ts#L147).\n- `withSkills` retrieves the [list of skills](src/types.ts#L164).\n- `withLanguages` retrieves the [list of languages](src/types.ts#L175).\n- `withInterests` retrieves the [list of interests](src/types.ts#L183).\n- `withReferences` retrieves the [list of professional references](src/types.ts#L191).\n- `withProjects` retrieves the [list of projects](src/types.ts#L200).\n\nAll hocs will add a new prop to the augmented component named after the type in lowercase, for example.\n\n```jsx harmony\nimport { withResume } from 'react-vitae';\n\nconst Component = ({ resume }) =\u003e { \n    // ...\n};\n\nexport default withResume(Component);\n```\n\n### Using render props\n\nThe package exports a set of components to retrieve the resume or part of it and use them with the render prop pattern.\n\n- `WithResume` retrieves the main [resume](src/types.ts#L232).\n- `WithBasic` retrieves the [basic resume information](src/types.ts#L29).\n- `WithWork` retrieves the [work experiences](src/types.ts#L58).\n- `WithVolunteer` retrieves the [volunteer experiences](src/types.ts#L87).\n- `WithEducation` retrieves the [education information](src/types.ts#L110).\n- `WithAwards` retrieves the [list of awards](src/types.ts#L133).\n- `WithPublications` retrieves the [list of publications](src/types.ts#L147).\n- `WithSkills` retrieves the [list of skills](src/types.ts#L164).\n- `WithLanguages` retrieves the [list of languages](src/types.ts#L175).\n- `WithInterests` retrieves the [list of interests](src/types.ts#L183).\n- `WithReferences` retrieves the [list of professional references](src/types.ts#L191).\n- `WithProjects` retrieves the [list of projects](src/types.ts#L200).\n\nThey will all execute the render prop function with an object containing the resume element named after the retreived type in lowercase, for example.\n\n```jsx harmony\nimport { WithResume } from 'react-vitae';\n\nexport const Component = () =\u003e (\n    \u003cWithResume\u003e\n        {({ resume }) =\u003e {\n            // ...\n        }}\n    \u003c/WithResume\u003e\n);\n```\n\n## Themes\n\nReact-Vitae previously included two ready made themes to quickly create resumes with. These themes are deprecated and are only kept for reference.\n\nSee each theme's readme for instruction on usage and how to install them.\n\n* [react-vitae-bulma-theme](/themes/react-vitae-bulma-theme)\n* [react-vitae-material-theme](/themes/react-vitae-material-theme)\n\n### Help needed\n\nAny Pull Request will be reviewed and merged if it looks good, all help is appreciated!\n\n## Development\n\n### Installing the dependencies\n\nRunning `npm install` in the project's root directory will install everything you need for development.\n\n### Running Lint\n\n`npm lint` will run eslint in all packages at once.\n\n### Running Tests\n\n`npm test` will run the tests in all packages at once.\n\n### Publishing\n\nPublishing is done manually at the moment using the `npm publish` command.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminivera%2Freact-vitae","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminivera%2Freact-vitae","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminivera%2Freact-vitae/lists"}