React vitae

react-vitae is a set of strongly typed and battle tested React components and hooks that enable you to connect a json-resume schema to your components and build great looking resumes from a standardized schema.

Installation

You can install react-vitae with NPM or Yarn.

npm install --save react-vitae or yarn add react-vitae

Usage

The main react-vitae package includes the TypeScript types for the standard JSON resume schema and a set of components.

Writing the resume file

The JSON resume repo provides all the tools to create and validate your resume file.

If using TypeScript, you can use the type suggestion and auto-completion feature of your IDE to create the schema using the provided types.

import { Resume } from 'react-vitae';

const resume: Resume = {};

The resume provider

The 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.

import { ResumeProvider } from 'react-vitae';

const resume = {};

export const App = () => (
    <ResumeProvider resume={resume}>
        {/* Your application goes here */}
    </ResumeProvider>
);

Using hooks

The package exports a set of custom hooks to retrieve the resume or part of it.

• useResume retrieves the main resume.
• useBasic retrieves the basic resume information.
• useWork retrieves the work experiences.
• useVolunteer retrieves the volunteer experiences.
• useEducation retrieves the education information.
• useAwards retrieves the list of awards.
• usePublications retrieves the list of publications.
• useSkills retrieves the list of skills.
• useLanguages retrieves the list of languages.
• useInterests retrieves the list of interests.
• useReferences retrieves the list of professional references.
• useProjects retrieves the list of projects.

All have the same signature: useElement(): type and return type specific type they represent.

Using Higher-Order components

The package exports a set of hocs to retrieve the resume or part of it and inject them in an augmented component.

• withResume retrieves the main resume.
• withBasic retrieves the basic resume information.
• withWork retrieves the work experiences.
• withVolunteer retrieves the volunteer experiences.
• withEducation retrieves the education information.
• withAwards retrieves the list of awards.
• withPublications retrieves the list of publications.
• withSkills retrieves the list of skills.
• withLanguages retrieves the list of languages.
• withInterests retrieves the list of interests.
• withReferences retrieves the list of professional references.
• withProjects retrieves the list of projects.

All hocs will add a new prop to the augmented component named after the type in lowercase, for example.

import { withResume } from 'react-vitae';

const Component = ({ resume }) => { 
    // ...
};

export default withResume(Component);

Using render props

The package exports a set of components to retrieve the resume or part of it and use them with the render prop pattern.

• WithResume retrieves the main resume.
• WithBasic retrieves the basic resume information.
• WithWork retrieves the work experiences.
• WithVolunteer retrieves the volunteer experiences.
• WithEducation retrieves the education information.
• WithAwards retrieves the list of awards.
• WithPublications retrieves the list of publications.
• WithSkills retrieves the list of skills.
• WithLanguages retrieves the list of languages.
• WithInterests retrieves the list of interests.
• WithReferences retrieves the list of professional references.
• WithProjects retrieves the list of projects.

They will all execute the render prop function with an object containing the resume element named after the retreived type in lowercase, for example.

import { WithResume } from 'react-vitae';

export const Component = () => (
    <WithResume>
        {({ resume }) => {
            // ...
        }}
    </WithResume>
);

Themes

React-Vitae previously included two ready made themes to quickly create resumes with. These themes are deprecated and are only kept for reference.

See each theme's readme for instruction on usage and how to install them.

• react-vitae-bulma-theme
• react-vitae-material-theme

Help needed

Any Pull Request will be reviewed and merged if it looks good, all help is appreciated!

Development

Installing the dependencies

Running npm install in the project's root directory will install everything you need for development.

Running Lint

npm lint will run eslint in all packages at once.

Running Tests

npm test will run the tests in all packages at once.

Publishing

Publishing is done manually at the moment using the npm publish command.