Skip to content
React-CV is fully customizable, responsive and printable CV / Resume component for React/Gatsby.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example optional branding added Sep 28, 2019
src
.babelrc
.editorconfig
.eslintrc Init :: React CV / Open Source React CV Component Sep 15, 2019
.gitignore Init :: React CV / Open Source React CV Component Sep 15, 2019
.travis.yml Init :: React CV / Open Source React CV Component Sep 15, 2019
README.md optional branding added Sep 28, 2019
cv_preview.png update readme Sep 15, 2019
mobile_preview.png
package.json
rollup.config.js Init :: React CV / Open Source React CV Component Sep 15, 2019
yarn.lock rm storybook and republish Sep 15, 2019

README.md

React-CV

A Readt to use resume (CV) Component built by React, available for React/Gatsby and fully printable!

React-CV is fully customizable,responsive and printable CV / Resume component for React/Gatsby. You can easily create your fully printable and beatiful CV / Resume by passing necessary props to React-CV. If needed, It is possible to use your own component inside.

You can easily integrate it to your existing apps, if you don't want to build an app, just fork the repository and edit data.js inside example app and build it!

Live Demo

NPM JavaScript Style Guide

Preview Desktop / PDF

Live Demo

Features

  • Ready to use by forking or installing on NPM
  • Customizable
  • Printable
  • Responsive
  • One click deploy (On the way)
  • Inline edit (On the way)

How to install ?

npm install react-cv or yarn add react-cv

Basic Usage

import React, { Component } from 'react'

import CV from 'react-cv'

class Example extends Component {
  render () {
    return (
      <CV
        personalData={{
          name: 'John Doe',
          title: 'Senior Software Developer',
          image: 'https://bulma.io/images/placeholders/128x128.png',
          contacts: [
            { type: 'email', value: 'john@example.com' },
            { type: 'phone', value: '+00 (123) 456 78 90' },
            { type: 'website', value: 'example.com' },
            { type: 'linkedin', value: 'linkedin.com/in/notexists' },
            { type: 'twitter', value: 'twitter.com/404' },
            { type: 'github', value: 'github.com/404' }
        ]}}
        sections= {[{
          type: 'text',
          title: 'Career Profile',
          content: 'When I was child, I always want to be a developer.',
          icon: 'usertie'
		}]}
		branding={true} // or false to hide it.
	  />
    )
  }
}

Advanced Usage & Prop List

React-CV only requires basic personal data to work. All other props are optional. Here are the complete list of props and descriptions.

List of Props

  • Personal Data

    Name of Prop: personalData Type: Object Schema:

     {
     name: 'String',
     title: 'String',
     image: 'String', // URL
     contacts: [ // Array of objects
     	{ // Single contact object
     		type: 'String', // Available values ['email', 'phone', 'website', 'github', 'linkedin', 'twitter']
     		value: 'String'
     	}
     ]
     }
  • Sections (Experiences, Projects, Career Profile, Skills, ETC)

    Name of Prop: sections Type: Array Of Objects Schema of single objeect:

     {
     type: 'String', // Available values ['text', 'common-list', 'projects-list', 'tag-list']
     title: 'String',
     icon: 'String or SVG Icon', // Available values ['graduation', 'book', 'comments', 'tasks', 'archive', 'rocket', 'language', 'cubes', 'usertie'] or FontAwesome SVG Icon
     description: 'String',
     groups: [ // Array of Object, if type is only projects-list
     	{ // Schema of single group object
           sectionHeader: 'Company Name',
           description: 'Optional',
           items: [
             { title: 'Project', projectUrl: 'optional', description: 'Optional' },
           ]
     	} 
     },
     items: [ // Array of Objects(type:common-list) or Array of Strings(type:tag-list)
     	{
     		  title: 'Some Conferences / 2019',
     		  authority: 'SomeConf',
     		  authorityMeta: 'Speaker',
     		  authorityWebSite: 'https://www.someconf.somesome',
     		  rightSide: 'test'
     	}
     ]

Too Lazy to read documentation? See working versions in example:

Example App Code

Example Data Format With Full Types (Code)

License

MIT © sbayd

You can’t perform that action at this time.