npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-raphael

v0.9.0

Published

reactify raphael

Downloads

3,174

Readme

react-raphael

Version Downloads

reactify raphael

Install

# or specify the externals in webpack config
npm install --save raphael
# install react-raphael in your react-raphael project
npm install --save react-raphael

Example

Quickly Start

var React = require('react');
var ReactDOM = require('react-dom');

const {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} = require('react-raphael');

class App extends React.Component{
    render(){
        var data = [
            {x:50,y:50,r:40,attr:{"stroke":"#0b8ac9","stroke-width":5},animate:Raphael.animation({cx:60},500,"<>")},
            {x:100,y:100,r:40,attr:{"stroke":"#f0c620","stroke-width":5},animate:Raphael.animation({cx:105},500,"<>")},
            {x:150,y:50,r:40,attr:{"stroke":"#1a1a1a","stroke-width":5}},
            {x:200,y:100,r:40,attr:{"stroke":"#10a54a","stroke-width":5},animate:Raphael.animation({cx:195},500,"<>")},
            {x:250,y:50,r:40,attr:{"stroke":"#e11032","stroke-width":5},animate:Raphael.animation({cx:240},500,"<>")}
        ]
        return (<Paper width={300} height={300}>
                       <Set>    
                        {
                            data.map(function(ele,pos){
                                return (<Circle key={pos} x={ele.x} y={ele.y} r={ele.r} attr={ele.attr} animate={ele.animate}/>)
                            })
                        }
                        </Set>
						<Set>
                            <Rect x={30} y={148} width={240} height={150} attr={{"fill":"#10a54a","stroke":"#f0c620","stroke-width":5}}/>
							<Ellipse x={150} y={198} ry={40} rx={100} attr={{"fill":"#fff","stroke":"#e11032"}} glow={{width:10,fill:true,color:"#0b8ac9",opacity:1}}/>
                            <Image src="static/images/5circle.png" x={100} y={170} width={90} height={60} />
							<Text x={150} y={258} text="同一个世界 同一个梦想" attr={{"fill":"#fff"}}/>
							<Text x={150} y={273} text="One World One Dream" attr={{"fill":"#fff"}}/>
							<Path d={["M150 287L150 287"]} animate={Raphael.animation({"path": ["M80 287L220 287"]},500,"<>")} attr={{"stroke":"#fff"}}/>
                            <Line x1={150} y1={290} x2={150} y2={290} animate={Raphael.animation({ x1:80, x2:220},500,"<>")} attr={{"stroke":"#fff"}}/>
						</Set>
                </Paper>)
    }
}

Snapshot

snapshot.png

API

All Element Props

  • Paper
    • width number width of the canvas.
    • height number height of the canvas.
    • container object props of the canvas's container.default value: { style:{}, className:"" }
  • Element
    • attr object Sets the attributes of the element.
    • animate object Creates and starts animation for given element.
    • animateWith object Acts similar to Element.animate, but ensure that given animation runs in sync with another given element.
    • click function Adds event handler for click for the element.
    • data object Adds or retrieves given value asociated with given key.
    • dblclick function Adds event handler for double click for the element.
    • drag object Adds event handlers for drag of the element. object {move,start,end,mcontext,scontext,econtext}
    • glow function Return set of elements that create glow-like effect around given element.
    • hover object Adds event handlers for hover for the element. object {in,out,icontext,ocontext}
    • hide boolean Makes element invisible.
    • mousedown function Adds event handler for mousedown for the element.
    • mousemove function Adds event handler for mousemove for the element.
    • mouseout function Adds event handler for mouseout for the element.
    • mouseover function Adds event handler for mouseover for the element.
    • mouseup function Adds event handler for mouseup for the element.
    • load function Adds event handler for load for the element.
    • rotate object Adds rotation by given angle around given point to the list of transformations of the element.
    • scale object Adds scale by given amount relative to given point to the list of transformations of the element.
    • stop boolen Stops animation for given element.
    • toBack boolean Moves the element so it is the furthest from the viewer’s eyes, behind other elements.
    • toFront boolean Moves the element so it is the closest to the viewer’s eyes, on top of other elements.
    • touchcancel function Adds event handler for touchcancel for the element.
    • touchend function Adds event handler for touchend for the element.
    • touchmove function Adds event handler for touchmove for the element.
    • touchstart function Adds event handler for touchstart for the element.
    • transform string or array Adds transformation to the element which is separate to other attributes, i.e. translation doesn’t change x or y of the rectange. The format of transformation string is similar to the path string syntax:"t100,100r30,100,100s2,2,100,100r45s1.5"
    • translate object Adds translation by given amount to the list of transformations of the element.
    • update function Adds event handler for update for the element.
  • Set Extends Element & Container Elements
  • Circle Extends Element & Draws a circle
    • x number x coordinate of the centre
    • y number y coordinate of the centre
    • r number radius
  • Ellipse Extends Element & Draws a ellipse
    • x number x coordinate of the centre
    • y number y coordinate of the centre
    • rx number horizontal radius
    • ry number vertical radius
  • Image Extends Element & Embeds an image into the surface
    • src string URI of the source image
    • x number x coordinate of the centre
    • y number y coordinate of the centre
    • width number width of the image
    • height number height of the image
  • Path Extends Element & Creates a path element by given path data string
    • d string path string in SVG format
  • Print Extends Element & Creates set of shapes to represent given font at given position with given size
    • x number x position of the text
    • y number y position of the text
    • text string text to print
    • font-family string family of font object
    • font-weight string weight of font object
    • font-style string style of font object
    • font-stretch string stretch of font object
    • font-size number size of the font, default is 16
    • origin string could be "baseline" or "middle", default is "middle"
    • letter-spacing number number in range -1..1, default is 0
  • Rect Extends Element & Draws a circle
    • x number x coordinate of the top left corner
    • y number y coordinate of the top left corner
    • width number width of the rect
    • height number height of the rect
    • r number radius for rounded corners, default is 0
  • Text Extends Element & Draws a text string & If you need line breaks, put “\n” in the string
    • x number x coordinate position
    • y number y coordinate position
    • text string The text string to draw
  • Line Extends Path & Draws a line
    • x1 number x coordinate of the start point
    • y1 number y coordinate of the start point
    • x2 number x coordinate of the end point
    • y2 number y coordinate of the end point

All Element Ref Function

  • Paper
    • getPaper function paper of the component
  • Set
    • getSet function set of the component
  • Element
    • getElement function element of the component

Raphael & Utils

  • Raphael you can see http://dmitrybaranovskiy.github.io/raphael/reference.html#Raphael
  • Utils
    • createPaper function create a paper by Raphael()
    • updatePaper function update a paper
    • removePaper function remove a paper
    • create function create elements or a set by paper.xxx
    • createElement function call create to create a element
    • createSet function call create to create a set
    • updateElement function update elements or a set
    • removeSet function remove a set from paper
    • removeElement function remove a element from paper
    • papers array all paper instance
    • elements array all elements or set of the only paper instance
    • findParentById function find parent of element by id

Contact

Email: [email protected]