Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
json-react-layouts-data-loader
Advanced tools
[![npm](https://img.shields.io/npm/v/json-react-layouts-data-loader)](https://www.npmjs.com/package/json-react-layouts-data-loader)
Component middleware for JSON React layouts which enables data loading via the React SSR Data Loader library.
import { init } from 'json-react-layouts-data-loader'
import { DataLoaderResources, DataProvider } from 'react-ssr-data-loader'
interface MyServices {
// Put the services you want available to components
}
const resources = new DataLoaderResources<MyServices>()
const { middleware, createRegisterableComponentWithData } = init<MyServices>(resources)
const componentRegistrar = new ComponentRegistrar()
// Register your components, then register the component data loading middleware
.registerMiddleware(middleware)
export const testComponentWithDataRegistration = createRegisterableComponentWithData(
'test-with-data',
{
// You provide this function to load the data
loadData: props => {},
},
(props, data) => {
if (!data.loaded) {
return <div>Loading...</div>
}
return <TestComponentWithData data={data.result} />
},
)
If you reference global variables in your data load function the data will not be re-fetched when that variable changes. This is because the data loader assumes if the arguments are the same, the result of the load function will be the same as the current data and do nothing.
You can use the useRuntimeParams
function to merge additional varibles to the data loader props when it re-renders so it can fetch the updated data as expected. For example if you had state stored in redux.
React hooks are supported inside this function.
import { init } from 'json-react-layouts-data-loader'
import { DataLoaderResources, DataProvider } from 'react-ssr-data-loader'
export const testComponentWithDataRegistration = createRegisterableComponentWithData(
'test-with-data',
{
getRuntimeParams: (props, services) => services.store.getState().myAdditionalState
// You provide this function to load the data
loadData: props => {
// Now the global state is visible to the data loader and will make up the cache key so changes to myAdditionalState will cause the data to be re-loaded
props.myAdditionalState
},
},
(props, data) => {
if (!data.loaded) {
return <div>Loading...</div>
}
return <TestComponentWithData data={data.result} />
},
)
FAQs
[![npm](https://img.shields.io/npm/v/json-react-layouts-data-loader)](https://www.npmjs.com/package/json-react-layouts-data-loader)
The npm package json-react-layouts-data-loader receives a total of 45 weekly downloads. As such, json-react-layouts-data-loader popularity was classified as not popular.
We found that json-react-layouts-data-loader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.