Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
react-supercomponents
Advanced tools
Data-aware react components that make performant app development easy
Super Components are a set of React components that are data-aware and follow native design patterns for optimial performance.
Unlike most other frameworks, Meteor is full-stack and isomorphic. This opens the door for data-aware components that can subscribe to data when they need it.
One of the main reasons native apps are more performant out of the box is that they follow better design patterns. These patterns include list views that recycle items and view controllers that take care of loading and unloading views in an efficient manner. We can achieve similar performance in web apps if we follow the same patterns.
Stack (routing of Layers and Transitions)
Layer (performs transitions, sends enabled/disabled status to children)
ImageUploader (uploads images, creates base64 preview to use as placeholder)
SuperTabs
SuperSwipe
SuperList
SuperHCR
##<Stack />
Stack is a component responsible for managing Layers. Stack is aware of each Layer's position within itself and functions as a router and transitioner between Layers. Stack will occupy all of the available space wherever it is placed. A Stack can be nested within another stack or can be a sibling of a Stack.
Stack requires a displayName property and takes optional in and out properties that define transitions between Layers. The properties refer to predefined animations. Stack's styles are defined inline to prevent contamination.
Stack has a default transition defined which has no animation. Stack can be implemented as follows:
<Stack displayName='Primary' in='slideUp' out='slideDown'>
<Layer>
// layer content
</Layer>
<Layer>
// layer content
</Layer>
</Stack>
##<DataLoader />
DataLoader is an abstract data-fetching component that extends Stack and contains Layers that use reserved displayNames. A Layer must be defined for each of the following states: loading, blank, loaded, error. DataLoader also deals internally with a fifth state, enabled/disabled, which prevents the component and any children from updating or performing any data fetching. The DataLoader is not meant to be used directly.
##<MeteorData />
MeteorData extends DataLoader and allows for hooks into meteor publication,
subscription pattern, to fetch data MeteorData accepts a subscription prop whose
key is the name of the publication being fetch and whose value will be passed to
the Meteor.publish
function.
So given the following publication:
Meteor.publish('users', function(){
return Meteor.users.find({})
})
We can initialize a subscription as follows:
img.onload(function(result){ cosnt base64 = result })
<MeteorData subscription={{users: null}}>
<Layer displayName='loading'>
<Spinner />
</Layer>
<Layer displayName='blank'>
<NoUsers />
</Layer>
<Layer displayName='error'>
<UsersListError />
</Layer>
<Layer displayName='loaded'>
<UsersList />
</Layer>
</MeteorData>
##<ImageData />
ImageData is a component that extends DataLoader and is responsible for managing the lifecycle of loading image data. It has a default behavior of lazy loading and uses the same lifecycle displayNames as the MeteorData loader.
<ImageData>
<Layer displayName='loading'>
<Spinner>
</Layer>
<Layer displayName='blank'>
<NoImage>
</Layer>
<Layer displayName='error'>
<ImageError>
</Layer>
<Layer displayName='loaded'>
<Image>
</Layer>
</ImageData>
##<Layer />
Layer is a component that is a direct child of a Stack. Layers are meant to be siblings and not directly nested within each other. Layers can contain Stacks or other markup.
Layers contain metadata such as their placement in the Stack and whether they are active or inactive. Layers will not update when they are inactive.
Layers have a displayName that allows the Stack to manage routing. Layers have optional in and out properties that override Stack transition rules. Layer's styles are defined inline to prevent contamination.
<Layer displayName='Home' in='fadeIn' out='fadeOut'/>
<UsersList />
<TabBar />
</Layer>
##<List />
List is a component that is responsible for creating an infinite list. List takes a data source and a list item component. List will then pass the data source, the index, and the key for each list item back to the given list item component. List can scroll infinitely, reclying elements in and out of the dom.
<List data={array} listItem='ListItemComponent'/>
results in:
<div id="superlist-component" {...{style}}>
<div style={listStyle}>
<ListItemcomponent/>
<ListItemcomponent/>
<ListItemcomponent/>
<ListItemcomponent/>
<ListItemcomponent/>
<ListItemcomponent/>
<ListItemcomponent/>
// until page size or data length is met
</div>
</div>
FAQs
Data-aware react components that make performant app development easy
The npm package react-supercomponents receives a total of 18 weekly downloads. As such, react-supercomponents popularity was classified as not popular.
We found that react-supercomponents demonstrated a not healthy version release cadence and project activity because the last version was released 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.