
Security News
PodRocket Podcast: Inside the Recent npm Supply Chain Attacks
Socket CEO Feross Aboukhadijeh discusses the recent npm supply chain attacks on PodRocket, covering novel attack vectors and how developers can protect themselves.
@valu/react-inline
Advanced tools
Tool for writing inline styles and scripts in React.
Often used in Next.js _document.tsx
files.
npm install @valu/react-inline
Add inline style tags with syntax highlighting via the css
template tag and
the VSCode extension.
Font CSS example:
import { InlineStyle, css } from "@valu/react-inline";
const fontCSS = css`
@font-face {
font-family: "ApexNewBookRegular";
src: url("/fonts/ApexNew-Book.otf");
font-display: swap;
}
@font-face {
font-family: "ApexNewBookBold";
src: url("/fonts/ApexNew-Bold.otf");
font-display: swap;
}
@font-face {
font-family: "ApexNewBookLight";
src: url("/fonts/ApexNew-Light.otf");
font-display: swap;
}
`;
<InlineStyle css={fontCSS} />;
Alternative API when you have a colliding css
template tags (ex. with react-bemed):
<InlineStyle
css={(css) => css`
body,
html {
padding: 0;
margin: 0;
}
`}
/>
Execute the given function in a inline <script>
tag
import { InlineScript } from "@valu/react-inline";
<InlineScript
exec={function () {
console.log("Inline script! ");
}}
/>;
With arguments
<InlineScript
args={["World"]}
exec={function (name: string) {
console.log("Hello " + name);
}}
/>
Caveats:
The script is inlined with Function#toString()
so you cannot reference
variables in the parent closures.
If the script is SSR rendered (ex. in Next.js _document.tsx
), it might not
get transpiled. It's better to avoid modern JavaScript syntax when legacy browser
support is required
The args are serialized with JSON.stringify()
A tiny wrapper for dangerouslySetInnerHTML
. Use for 3rdparty embeding such as
Google Tag Manager.
<InlineScript.Raw
code={`(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','***');`}
/>
FAQs
Tool for writing inline styles and scripts in React.
The npm package @valu/react-inline receives a total of 0 weekly downloads. As such, @valu/react-inline popularity was classified as not popular.
We found that @valu/react-inline demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers 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
Socket CEO Feross Aboukhadijeh discusses the recent npm supply chain attacks on PodRocket, covering novel attack vectors and how developers can protect themselves.
Security News
Maintainers back GitHub’s npm security overhaul but raise concerns about CI/CD workflows, enterprise support, and token management.
Product
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.