Skip to content

reviz/svg-prop-types

Repository files navigation

svg-prop-types

Build Status

Custom SVG prop types for React.

SVG content type:

...

SVG and HTML attributes sets:

  • shape contains common shapes attributes
  • conditionalProcessing
  • core contains core HTML attributes
  • graphicalEvent contains graphical events attributes
  • documentEvent contains document events attributes
  • presentation contains presentational attributes

...

SVG elements:

  • SVG
  • circle
  • line

...

Usage

import React, { Component } from 'react';
import { circle as circlePropType } from 'svg-prop-types';

class Circle extends Component {
  static propTypes = circlePropType;

  render() {
    return (
      <circle
        {...this.props}
      />
    );
  }
}

export default Circle;

Production

Build pipeline is borrowed from https://github.com/airbnb/prop-types

Since PropTypes are typically not included in production builds of React, this library’s functionality serves no useful purpose. As such, when the NODE_ENV environment variable is "production", instead of exporting the implementations of all these prop types, we export mock functions - in other words, something that ensures that no exceptions are thrown, but does no validation. When environment variables are inlined (via a browserify transform or webpack plugin), then tools like webpack or uglify are able to determine that only the mocks will be imported - and can avoid including the entire implementations in the final bundle that is sent to the browser. This allows for a much smaller ultimate file size, and faster in-browser performance, without sacrificing the benefits of PropTypes themselves.

Tests

Simply clone the repo, npm install, and run npm test