react-keyshape

react-keyshape enables you to have Keyshape-animations in React projects. Please note that this is a beta-release.

npm install --save react-keyshape

yarn add react-keyshape

A demo can be found here react-keyshape-demo. A complete demo-project can be found here react-keyshape.

Changelog

2018-03-06 You now have all registered Keyshape players available under window.Keyshape.players

2018-02-15 Callback-function now also contains the DOM-node.

2018-02-12 Callback-function added containing the Keyshape-player.

2018-02-09 Great news! You now have two options two choose from! Keyshape-component and withKeyshape-HOC.

Option 1 (recommended):

import { Keyshape } from 'react-keyshape';
import yourSvgImageWithAnimations from '[PATH_TO_SVG]';

<Keyshape svg={yourSvgImageWithAnimations} callback={ (player, keyshapeElement) => {
  setTimeout(()=>{ player.pause() }, 8000); // Pauses the animation after 8s.
}}/>

Parameters

svg Your svg-image.

callback Callback-function containing the svg's Keyshape-player and the Keyshape DOM-element.

Option 2:

import { withKeyshape } from 'react-keyshape';

const keyshapeSettings = {
  "jsId" : "ks",
  "animationScriptUrl" : "[PATH_TO_YOUR_JS_FILE]" // Will be [ROOT]/scripts/[PATH_TO_YOUR_JS_FILE]
}

const KeyshapeSVG = (props) => {
return([YOUR_SVG_CODE_WITHOUT_JAVASCRIPT_GOES_HERE]); 
}

export default withKeyshape(keyshapeSettings, KeyshapeSVG);

settings: (Object)

jsId The property name available through the window-object (should be ks).

animationScriptUrl The path to the script-file containing the Keyshape animation.

component: (React-component)

The React-component which is wrapped by the higher order component

withKeyshape HOC Usage

You need to:

• Use absolute imports
• Move the < script >-tag located within the svg-file generated by Keyshape into it's separate .js-file.
• Remove the beginning < script >< ![CDATA[ and the ]]>< /script > at the end.
• The .js-file you create has to be located under [ROOT]/scripts/[PATH_TO_YOUR_FILE].
• You might need to wrap the "playing-part" of the script in a document-ready block so it doesn't execute until the DOM is available.

// self executing function here
(function(ks) {
   // your animation code goes here
   // the DOM will be available here

})(window.ks);

• You need to extract the svg-part from the .svg-file into the React-component e.g.

  const KeyshapeComponent = (props) => {
    return([YOUR_SVG_CODE_WITHOUT_JAVASCRIPT_GOES_HERE])
  }

• You then need to reformat some of the svg-attributes e.g. stroke-width has to be strokeWidth, stroke-linecap has to be strokeLinecap, stroke-linejoin has to be strokeLinejoin, stroke-dashoffset has to be strokeDashoffset, stroke-dasharray has to be strokeDasharray,

  More info: https://reactjs.org/docs/dom-elements.html#all-supported-svg-attributes

withKeyshape HOC Example

The icon used in this example is made by my good friend Juan Maguid.

import React from 'react';
import withKeyshape from 'react-keyshape';

const keyshapeSettings = {
  "jsId" : "ks",
  "animationScriptUrl" : "keyshape/vinyl-dj-dark-grey.js" //This will look for [ROOT]/scripts/keyshape/vinyl-dj-dark-grey.js
}

const KeyshapeSVG = (props) => {
  // https://reactjs.org/docs/dom-elements.html#all-supported-svg-attributes
  return(
    <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="80" height="80" viewBox="0 0 80 80">
      <defs>
          <symbol id="record" preserveAspectRatio="none" width="60" height="60" viewBox="0 0 60 60" overflow="visible">
            <g id="vinyl-record-x" fill="none" transform="translate(30,30) rotate(360) translate(-30,-30)">
                <path id="big-circle-x" fill="#404040" d="M30,0C13.4314,0,0,13.4314,0,30C0.01875,46.5607,13.4393,59.9812,30,60C46.5686,60,60,46.5686,60,30C60,13.4314,46.5686,0,30,0zM30,58C14.5361,58,2.00004,45.4639,2.00004,30C2.01738,14.5432,14.5432,2.01738,30,2.00004C45.4639,2.00004,58,14.5361,58,30C58,45.4639,45.4639,58,30,58z" transform="translate(30,30) translate(-30,-30)"/>
                <path id="inner-circle-x" fill="#404040" d="M44,30C44,22.268,37.732,16,30,16C22.2716,16.0086,16.0086,22.2716,16,30C16,37.732,22.268,44,30,44C37.732,44,44,37.732,44,30zM18,30C18,23.3726,23.3726,18,30,18C36.6244,18.0074,41.9926,23.3756,42,30C42,36.6274,36.6274,42,30,42C23.3726,42,18,36.6274,18,30z" transform="translate(30,30) translate(-30,-30)"/>
                <path id="middle-circle-x" fill="#404040" d="M33,30C33,28.3432,31.6568,27,30,27C28.3439,27.0018,27.0018,28.3439,27,30C27,31.6568,28.3431,33,30,33C31.6569,33,33,31.6568,33,30zM29,30C29,29.4477,29.4477,29,30,29C30.5521,29.0006,30.9995,29.4479,31,30C31,30.5523,30.5523,31,30,31C29.4477,31,29,30.5523,29,30z" transform="translate(30,30) translate(-30,-30)"/>
                <path id="shine-6-x" stroke="#404040" strokeWidth="2" d="M55,30L55,30C54.9846,43.8003,43.8002,54.9846,29.9989,54.9999L30,55L30,55C43.8011,54.9843,54.9843,43.8011,55,30.0011L55,30Z" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="79 79" strokeDashoffset="79"/>
                <path id="shine-4-x" stroke="#404040" strokeWidth="2" d="M45.4974,37.0001L45.4972,36.9999L45.4972,36.9996C43.7916,40.7704,40.7709,43.791,37.0001,45.4966L37,45.4967L37,45.4965L37.0001,45.4966C40.7708,43.7913,43.7915,40.771,45.4974,37.0001z" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="25 25" strokeDashoffset="25"/>
                <path id="shine-3-x" stroke="#404040" strokeWidth="2" d="M29.9989,5C16.1989,5.01575,5.01575,16.1989,5,29.9989L4.99992,30L4.99996,30C5.0154,16.1997,16.1998,5.0154,30.0011,5.00008L30,5.00004L30,5L29.9989,5Z" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="79 79" strokeDashoffset="79"/>
                <path id="shine-1-x" stroke="#404040" strokeWidth="2" d="M23,14.5033L23.0001,14.5033L23,14.5033C23,14.5033,23,14.5033,23,14.5034L23,14.5033ZM23,14.5034C23,14.5034,23,14.5034,23,14.5034L22.9999,14.5034C19.2292,16.2087,16.2085,19.229,14.5026,22.9998L14.5026,23.0002L14.5026,23.0002L14.5028,23.0004C16.2084,19.2296,19.2291,16.209,22.9999,14.5034L23,14.5033L23,14.5034Z" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="25 25" strokeDashoffset="25"/>
                <path id="shine-2-x" stroke="#404040" strokeWidth="2" d="M25.5507,9.01385C17.1913,10.6996,10.6616,17.2463,9.00032,25.615C8.99927,25.6204,8.99936,25.6203,8.99945,25.6203C8.99996,25.6203,8.9988,25.6202,8.99719,25.6199C8.99961,25.6203,8.99975,25.6204,8.99982,25.6205L8.99999,25.6213C10.6603,17.2539,17.19,10.7041,25.5507,9.01385zM25.6188,9.00019C25.6206,8.99985,25.6223,8.99951,25.624,8.99916C25.6189,9.00017,25.6188,9.00015,25.6188,9.00019zM25.5507,9.01385C25.5734,9.00926,25.5961,9.00471,25.6188,9.00019C25.6188,9.00027,25.6189,9.00024,25.6188,9.00024L25.6136,9.00127C25.5926,9.00544,25.5716,9.00963,25.5507,9.01385z" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="50 50" strokeDashoffset="50"/>
                <path id="shine-5-x" stroke="#404040" strokeWidth="2" d="M25.5507,9.01385C17.1913,10.6996,10.6616,17.2463,9.00032,25.615C8.99927,25.6204,8.99936,25.6203,8.99945,25.6203C8.99996,25.6203,8.9988,25.6202,8.99719,25.6199C8.99961,25.6203,8.99975,25.6204,8.99982,25.6205L8.99999,25.6213C10.6603,17.2539,17.19,10.7041,25.5507,9.01385zM25.6188,9.00019C25.6206,8.99985,25.6223,8.99951,25.624,8.99916C25.6189,9.00017,25.6188,9.00015,25.6188,9.00019zM25.5507,9.01385C25.5734,9.00926,25.5961,9.00471,25.6188,9.00019C25.6188,9.00027,25.6189,9.00024,25.6188,9.00024L25.6136,9.00127C25.5926,9.00544,25.5716,9.00963,25.5507,9.01385z" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="50 50" strokeDashoffset="50" transform="translate(43.0811,42.6889) rotate(-180) translate(-17.3106,-17.3102)"/>
            </g>
        </symbol>
    </defs>
    <use id="spinning-records" width="60" height="60" xlinkHref="#record" transform="translate(40,40) rotate(360) translate(-30,-30)"/>
    <g id="dj-hand" transform="translate(60.4856,74.7211) translate(-15.4856,-45.7211)">
        <path id="hand-fills" fill="#FFFFFF" d="M29.3536,21.3361C30.9814,22.3736,31.4604,24.5339,30.4239,26.1622L20.4122,41.8311C18.764,44.425,15.9014,45.993,12.8282,45.9854L9.00002,45.9854C4.03174,45.98,0.00541556,41.9537,2.49226e-05,36.9854L2.49226e-05,11.0255C-0.00349071,10.0962,0.365064,9.20402,1.02342,8.54801C1.68225,7.89469,2.57206,7.52742,3.49995,7.52555C4.02014,7.52836,4.53307,7.64906,4.99995,7.87852L4.99995,7.2716C4.99842,5.33555,6.56393,3.76336,8.49999,3.75691C9.02018,3.75973,9.53299,3.88031,9.99999,4.10941L9.99999,3.50004C9.99999,1.56703,11.567,0,13.5,0C15.433,0,17.0001,1.56703,17.0001,3.50004L17.0001,4.10402C17.4675,3.87668,17.9802,3.75738,18.5001,3.75492C20.4321,3.75727,21.9978,5.32289,22.0001,7.25496L22.0001,26.3413L24.5176,22.3977C25.0181,21.6156,25.8083,21.0639,26.7149,20.8635C27.6222,20.6577,28.5742,20.8282,29.3536,21.3361z"/>
        <path id="hand-outline" fill="#404040" d="M29.3536,21.3361L29.3536,21.3361C28.5742,20.8282,27.6222,20.6577,26.7149,20.8635C25.8083,21.0639,25.0181,21.6156,24.5176,22.3977L22.0001,26.3413L22.0001,7.25496C21.9978,5.32289,20.4321,3.75727,18.5001,3.75492C17.9802,3.75738,17.4675,3.87668,17.0001,4.10402L17.0001,3.50004C17.0001,1.56703,15.433,0,13.5,0C11.567,0,9.99999,1.56703,9.99999,3.50004L9.99999,4.10941C9.53299,3.88031,9.02018,3.75973,8.49999,3.75691C6.56393,3.76336,4.99842,5.33555,4.99995,7.2716L4.99995,7.87852C4.53307,7.64906,4.02014,7.52836,3.49995,7.52555C2.57206,7.52742,1.68225,7.89469,1.02342,8.54801C0.365064,9.20402,-0.00349071,10.0962,2.49226e-05,11.0255L2.49226e-05,36.9854C0.00541556,41.9537,4.03174,45.98,9.00002,45.9854L12.8282,45.9854C15.9014,45.993,18.764,44.425,20.4122,41.8311L30.4239,26.1622C31.4604,24.5339,30.9814,22.3736,29.3536,21.3361zM28.7374,25.087L28.7374,25.087L18.7266,40.7551C17.4442,42.7719,15.2181,43.9911,12.8282,43.9855L9.00002,43.9855C5.136,43.9808,2.00475,40.8496,2.00006,36.9855L2.00006,11.0255C1.99795,10.6273,2.1551,10.2446,2.43659,9.96293C2.86924,9.5325,3.51917,9.40641,4.08143,9.64371C4.6437,9.88102,5.00663,10.4346,5.00006,11.0449L5.00006,21.1007C5.00006,21.653,5.44784,22.1006,6.00002,22.1006C6.55233,22.1006,6.99999,21.653,6.99999,21.1007L6.99999,7.2716C6.99483,6.7323,7.27948,6.23156,7.74577,5.96039C8.21206,5.68922,8.78792,5.68922,9.2542,5.96039C9.72049,6.23156,10.0053,6.73219,9.99999,7.2716L9.99999,21.1007C9.99999,21.653,10.4476,22.1006,10.9999,22.1006C11.5523,22.1006,11.9999,21.653,11.9999,21.1007L11.9999,3.50016C11.9948,2.96086,12.2794,2.46012,12.7457,2.18895C13.212,1.91777,13.7878,1.91777,14.2541,2.18895C14.7204,2.46012,15.0052,2.96074,14.9999,3.50016L14.9999,21.0997C14.9999,21.652,15.4476,22.0997,15.9999,22.0997C16.5522,22.0997,16.9998,21.6519,16.9998,21.0997L16.9998,7.27547C16.9994,6.87035,17.1594,6.48164,17.4451,6.19441C17.7226,5.91117,18.1033,5.7525,18.4998,5.75496C19.3279,5.7559,19.9989,6.42691,19.9998,7.25496L19.9998,29.7656C20.0049,29.8003,20.0118,29.8346,20.0206,29.8686C20.027,29.9361,20.0404,30.0027,20.0606,30.0674C20.1192,30.2535,20.2334,30.4173,20.3876,30.5368C20.415,30.5589,20.4315,30.5891,20.4618,30.6083C20.4852,30.6232,20.5123,30.6244,20.5364,30.6371C20.6562,30.6956,20.785,30.7335,20.9174,30.7489C20.946,30.7514,20.9706,30.7656,20.9999,30.7656C21.0354,30.7605,21.0706,30.7534,21.1051,30.7444C21.1709,30.7379,21.2358,30.7249,21.2989,30.7054C21.4183,30.6666,21.5295,30.6061,21.6269,30.527C21.6803,30.4825,21.7289,30.4322,21.7716,30.3772C21.7933,30.3502,21.8234,30.3338,21.8426,30.3038L26.2,23.4785C26.6456,22.7816,27.571,22.5762,28.2696,23.0191C28.9683,23.4621,29.1777,24.3866,28.7374,25.087z"/>
    </g>
    </svg>);
}

export default withKeyshape(keyshapeSettings, KeyshapeSVG);

Complete example @ GitHub

react-keyshape