New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →

Book a Demo Sign in

react2schema

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react2schema

transform react code to json schema of React style

latest

Source

npm

Version: 0.0.4

Version published: 7 years ago

Weekly downloads: 0

Maintainers: 1

Weekly downloads

Created: 7 years ago

Source

react2schema

transform react code to json schema of React style

Installation

npm i react2schema -S

preview

Usage

// nodejs env
const react2schema = require('react2schema/lib/node');
// web env
// const react2schema = require('react2schema/lib/web');
console.log(react2schema(getCode()));

function getCode(){
  return `import React, { Component } from 'react';

export default class About extends Component {
  static displayName = 'About';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div style={styles.container}>
        <div style={styles.content}>
          <div style={styles.mainTitle}>ABOUT</div>
          <div style={styles.mainDesc}>关于阿里云</div>
          <div style={styles.tab}>
            <div
              style={{ ...styles.tabName, ...styles.first, ...styles.active }}
            >
              企业级
            </div>
            <div style={{ ...styles.tabName }}>个人级</div>
          </div>
          <div style={styles.items}>
            <div>
              <div style={styles.tabList} key="0">
                <div style={styles.left}>
                  <div style={styles.num}>123</div>
                  <div style={styles.title}>云存储特惠</div>
                </div>
                <div style={styles.middle}>
                  <div style={styles.desc}>
                    上云仅33元/年，降低企业成本
                  </div>
                </div>
                <div style={styles.btnBox}>
                  <a href="#" style={styles.btnLink}>
                    查看详情
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const styles = {
  container: {
    padding: '50px 0',
    background: '#000',
  },
  content: {
    width: '1200px',
    margin: '0 auto',
    position: 'relative',
  },
  mainTitle: {
    fontSize: '60px',
    color: '#fff',
    letterSpacing: '0.77px',
    lineHeight: '72px',
    margin: '0',
    fontWeight: '700',
  },
  mainDesc: {
    fontSize: '24px',
    lineHeight: '30px',
    color: '#fff',
    marginTop: '8px',
    fontWeight: '700',
  },
  img: {
    marginTop: '70px',
    maxWidth: '100%',
  },
  tab: {
    position: 'absolute',
    right: '10px',
    top: '66px',
    overflow: 'hidden',
  },
  first: {
    marginTop: '0',
  },
  active: {
    color: '#fff',
    borderBottom: '1px solid #fff',
  },
  tabName: {
    float: 'left',
    cursor: 'pointer',
    fontSize: '26px',
    lineHeight: '30px',
    color: 'hsla(0,0%,100%,.5)',
    marginLeft: '30px',
    padding: '14px 0',
    borderBottom: '1px solid transparent',
    transition: 'all .3s',
  },
  items: {
    overflow: 'hidden',
    paddingTop: '50px',
  },
  tabList: {
    height: '80px',
    background: '#191a1e',
    position: 'relative',
    paddingRight: '40px',
    marginTop: '20px',
    transition: 'all .3s',
  },
  middle: {
    paddingLeft: '335px',
    paddingRight: '180px',
    height: '80px',
    overflow: 'hidden',
  },
  left: {
    position: 'absolute',
    left: '0',
    top: '0',
    height: '80px',
    overflow: 'hidden',
  },
  num: {
    float: 'left',
    fontSize: '42px',
    width: '80px',
    height: '80px',
    lineHeight: '80px',
    fontWeight: '700',
    color: '#fff',
    textAlign: 'center',
    background: '#236cff',
  },
  title: {
    float: 'left',
    maxWidth: '255px',
    fontSize: '20px',
    lineHeight: '80px',
    color: '#fff',
    paddingLeft: '40px',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
  },
  desc: {
    fontSize: '14px',
    lineHeight: '24px',
    color: 'hsla(0,0%,100%,.8)',
    marginTop: '28px',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  },
  btnBox: {
    position: 'absolute',
    right: '40px',
    top: '20px',
  },
  btnLink: {
    display: 'inline-block',
    width: '160px',
    height: '40px',
    border: '1px solid #fff',
    lineHeight: '38px',
    fontSize: '16px',
    color: '#fff',
    textDecoration: 'none',
    textAlign: 'center',
    transition: 'all .3s',
  },
};
`;
}

output json below

{"component":"div","props":{"style":{"padding":"50px 0","background":"#000"}},"children":[{"component":"div","props":{"style":{"width":"1200px","margin":"0 auto","position":"relative"}},"children":[{"component":"div","props":{"style":{"fontSize":"60px","color":"#fff","letterSpacing":"0.77px","lineHeight":"72px","margin":"0","fontWeight":"700"},"data_text":"ABOUT"},"children":[]},{"component":"div","props":{"style":{"fontSize":"24px","lineHeight":"30px","color":"#fff","marginTop":"8px","fontWeight":"700"},"data_text":"关于阿里云"},"children":[]},{"component":"div","props":{"style":{"position":"absolute","right":"10px","top":"66px","overflow":"hidden"}},"children":[{"component":"div","props":{"style":{"float":"left","cursor":"pointer","fontSize":"26px","lineHeight":"30px","color":"hsla(0,0%,100%,.5)","marginLeft":"30px","padding":"14px 0","borderBottom":"1px solid transparent","transition":"all .3s"},"data_text":"企业级"},"children":[]},{"component":"div","props":{"style":{"float":"left","cursor":"pointer","fontSize":"26px","lineHeight":"30px","color":"hsla(0,0%,100%,.5)","marginLeft":"30px","padding":"14px 0","borderBottom":"1px solid transparent","transition":"all .3s"},"data_text":"个人级"},"children":[]}]},{"component":"div","props":{"style":{"overflow":"hidden","paddingTop":"50px"}},"children":[{"component":"div","props":null,"children":[{"component":"div","props":{"style":{"height":"80px","background":"#191a1e","position":"relative","paddingRight":"40px","marginTop":"20px","transition":"all .3s"},"key":"0"},"children":[{"component":"div","props":{"style":{"position":"absolute","left":"0","top":"0","height":"80px","overflow":"hidden"}},"children":[{"component":"div","props":{"style":{"float":"left","fontSize":"42px","width":"80px","height":"80px","lineHeight":"80px","fontWeight":"700","color":"#fff","textAlign":"center","background":"#236cff"},"data_text":"123"},"children":[]},{"component":"div","props":{"style":{"float":"left","maxWidth":"255px","fontSize":"20px","lineHeight":"80px","color":"#fff","paddingLeft":"40px","whiteSpace":"nowrap","overflow":"hidden"},"data_text":"云存储特惠"},"children":[]}]},{"component":"div","props":{"style":{"paddingLeft":"335px","paddingRight":"180px","height":"80px","overflow":"hidden"}},"children":[{"component":"div","props":{"style":{"fontSize":"14px","lineHeight":"24px","color":"hsla(0,0%,100%,.8)","marginTop":"28px","whiteSpace":"nowrap","overflow":"hidden","textOverflow":"ellipsis"},"data_text":"上云仅33元/年，降低企业成本"},"children":[]}]},{"component":"div","props":{"style":{"position":"absolute","right":"40px","top":"20px"}},"children":[{"component":"a","props":{"href":"#","style":{"display":"inline-block","width":"160px","height":"40px","border":"1px solid #fff","lineHeight":"38px","fontSize":"16px","color":"#fff","textDecoration":"none","textAlign":"center","transition":"all .3s"},"data_text":"查看详情"},"children":[]}]}]},{"component":"div","props":{"style":{"height":"80px","background":"#191a1e","position":"relative","paddingRight":"40px","marginTop":"20px","transition":"all .3s"},"key":"1"},"children":[{"component":"div","props":{"style":{"position":"absolute","left":"0","top":"0","height":"80px","overflow":"hidden"}},"children":[{"component":"div","props":{"style":{"float":"left","fontSize":"42px","width":"80px","height":"80px","lineHeight":"80px","fontWeight":"700","color":"#fff","textAlign":"center","background":"#236cff"},"data_text":"123"},"children":[]},{"component":"div","props":{"style":{"float":"left","maxWidth":"255px","fontSize":"20px","lineHeight":"80px","color":"#fff","paddingLeft":"40px","whiteSpace":"nowrap","overflow":"hidden"},"data_text":"云存储特惠"},"children":[]}]},{"component":"div","props":{"style":{"paddingLeft":"335px","paddingRight":"180px","height":"80px","overflow":"hidden"}},"children":[{"component":"div","props":{"style":{"fontSize":"14px","lineHeight":"24px","color":"hsla(0,0%,100%,.8)","marginTop":"28px","whiteSpace":"nowrap","overflow":"hidden","textOverflow":"ellipsis"},"data_text":"上云仅33元/年，降低企业成本"},"children":[]}]},{"component":"div","props":{"style":{"position":"absolute","right":"40px","top":"20px"}},"children":[{"component":"a","props":{"href":"#","style":{"display":"inline-block","width":"160px","height":"40px","border":"1px solid #fff","lineHeight":"38px","fontSize":"16px","color":"#fff","textDecoration":"none","textAlign":"center","transition":"all .3s"},"data_text":"查看详情"},"children":[]}]}]},{"component":"div","props":{"style":{"height":"80px","background":"#191a1e","position":"relative","paddingRight":"40px","marginTop":"20px","transition":"all .3s"},"key":"2"},"children":[{"component":"div","props":{"style":{"position":"absolute","left":"0","top":"0","height":"80px","overflow":"hidden"}},"children":[{"component":"div","props":{"style":{"float":"left","fontSize":"42px","width":"80px","height":"80px","lineHeight":"80px","fontWeight":"700","color":"#fff","textAlign":"center","background":"#236cff"},"data_text":"123"},"children":[]},{"component":"div","props":{"style":{"float":"left","maxWidth":"255px","fontSize":"20px","lineHeight":"80px","color":"#fff","paddingLeft":"40px","whiteSpace":"nowrap","overflow":"hidden"},"data_text":"云存储特惠"},"children":[]}]},{"component":"div","props":{"style":{"paddingLeft":"335px","paddingRight":"180px","height":"80px","overflow":"hidden"}},"children":[{"component":"div","props":{"style":{"fontSize":"14px","lineHeight":"24px","color":"hsla(0,0%,100%,.8)","marginTop":"28px","whiteSpace":"nowrap","overflow":"hidden","textOverflow":"ellipsis"},"data_text":"上云仅33元/年，降低企业成本"},"children":[]}]},{"component":"div","props":{"style":{"position":"absolute","right":"40px","top":"20px"}},"children":[{"component":"a","props":{"href":"#","style":{"display":"inline-block","width":"160px","height":"40px","border":"1px solid #fff","lineHeight":"38px","fontSize":"16px","color":"#fff","textDecoration":"none","textAlign":"center","transition":"all .3s"},"data_text":"查看详情"},"children":[]}]}]}]}]}]}]}

Keywords

react2schema

schema

FAQs

What is react2schema?

Is react2schema popular?

Is react2schema well maintained?

Package last updated on 21 Aug 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

react2schema

react2schema

Installation

Usage

Keywords

Related posts

Axios Maintainer Confirms Social Engineering Attack Behind npm Compromise

Node.js Drops Bug Bounty Rewards After Funding Dries Up