Skip to content

Connect resumes written in JSON with Resume.json and React

License

Notifications You must be signed in to change notification settings

Minivera/react-vitae

Repository files navigation

React vitae

GitHub GitHub stars Build Status codecov

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.

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.

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.

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.

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.