@valu/react-inline
v2.0.0
Published
Tool for writing inline styles and scripts in React.
Downloads
45
Keywords
Readme
React Inline
Tool for writing inline styles and scripts in React.
Often used in Next.js _document.tsx
files.
Install
npm install @valu/react-inline
Inline Styles
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;
}
`}
/>
Inline Script
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- TypeScript types are stripped always though.
The args are serialized with
JSON.stringify()
Raw Inline Script
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','***');`}
/>