Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-isomorphic-tools

Package Overview
Dependencies
Maintainers
1
Versions
124
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-isomorphic-tools

Authorization, Fetcher, Preload. Tools for ServerSide rendering

  • 1.0.9
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2
Maintainers
1
Weekly downloads
 
Created
Source

react-security-fetcher

Utils

  • Auth
  • apiCall
  • fetchData (with redux)

###Auth

methods:

  • setToken
  • getToken
  • setRefreshToken
  • getRefreshToken
  • isAuthenticated
  • logout
decorator @Check

in pages/*

import React from 'react'
import {Check} from 'react-security-fetcher'

@Check({roles: ['ROLE_USER']})

export default class App extends React.Component{
    render(){
        return (<div>security component</div>)
    }
}

###apiCall

methods:

  • redux
  • fetchData
redux (usage in @preload)
import React from 'react'
import {preload} from 'react-isomorphic-render/redux'
import {connect} from 'react-redux'

@preload(({dispatch, parameters, fetchData})=>dispatch(fetchData(`/events/${parameters.id}`, 'eventsShow')))
@connect((state)=>{
    return {
        eventsShow: state.fetchData.eventsShow.response
    }
})
export default class Event extends React.Component{
    render(){
        const {eventsShow} = this.props
        return (
            <div>
                Event component ;)<br/>
                <div dangerouslySetInnerHTML={{__html: eventsShow.description}}></div>
            </div>
        )
    }
}
redux as fetchData
import React from 'react'
import {connect} from 'react-redux'
import {redux as fetchData} from 'react-security-fetcher'
import {bindActionCreators} from 'redux'

@connect(state=>({
    eventsShow: state.fetchData.eventsShow
}), dispatch=>({
    actions: bindActionCreators({fetchData}, dispatch)
}))
export default class App extends React.Component{
   
    componentDidMount = () => {
        const {actions: {fetchData}, params} = this.props
        fetchData(`/events/${params.id}`, 'eventsShow', 'GET', {
            params:{
                key: 'value'
            },
            base_url: 'http://example.com/api'
        })
    }
    
    render(){
        const {eventsShow = {response: {items: []}}} = this.props
        return(
            <div></div>)
    }
}
redux(URL, key, method = 'GET', params)
  • URL - without prefix
  • key - key in redux storage for save
  • method - 'get/post/put ...'
  • params - { params: - will be added to request base_url: - custom base url type: - formData or json, default json }
fetchData
fetchData(URL, method = 'GET', params)
  • URL - without prefix
  • method - 'get/post/put ...'
  • params - { params: - will be added to request base_url: - custom base url type: - formData or json, default json }

all parameters will be added to request as query string if method == ('GET'||'DELETE') other in request body

for use type='form-data' must be attach new FormData() object to params fetchData(URL, method = 'POST', {type: 'form-data', params: new FormData()})

FAQs

Package last updated on 16 Feb 2017

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc