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.
babel-plugin-transform-react-pug
Advanced tools
The official means by which you can use pug in your react components, replaces the use of react-jade when moving to pug.
This plugin transforms the pug inside of your react components.
npm install babel-plugin-transform-react-pug --save-dev
npm install babel-plugin-transform-react-jsx --save-dev
.babelrc
{
"plugins": [
"transform-react-pug",
"transform-react-jsx",
]
}
You can now create a react component with your pug inside it.
import React from 'react';
class MyComponent extends React.Component {
render() {
return pug`
div
h1 My Component
p This is my component using pug.
`;
}
}
You can use a pug component in another component.
import React from 'react';
import MyComponent from './my-component'
class MyNewComponent extends React.Component {
render() {
const prop1 = 'This is something to pass to another component';
return pug`
div
h1 MyNewComponent
p This component imports my other component.
p It could import several of these within the pug.
MyComponent
p If I had created a component with props I could pass them from this component.
AComponentExpectingProps(
prop1 = prop1
)
`
}
}
You can create a pug constant that you can simply re-use in your code.
import React from 'react';
class MyComponent extends React.Component {
_onDoOneThing = () => {
console.dir('Do one thing');
};
_onDoAnotherThing = () => {
console.dir('Do Another thing');
};
render() {
const myButtons = pug`
div
button(onClick=this._onDoOneThing) Do One Thing
= ' '
button(onClick=this._onDoAnotherThing) Do Another Thing
`;
return pug`
div
h1 MyComponent
p this component uses buttons from my constant.
div
= myButtons
`
}
}
If you'd prefer to use interpolation, you can! This is possible by using ${ }
within your template.
This lets you benefit from syntax highlighting and linting!
import React from 'react';
const List = (props) => {
return pug`
ul.list(className=${ props.modifier })
${ props.items.map((item, index) => pug`li.list__item(key=${ index }) ${ item }` ) }
`
}
FAQs
A plugin for transpiling pug templates to jsx
The npm package babel-plugin-transform-react-pug receives a total of 3,145 weekly downloads. As such, babel-plugin-transform-react-pug popularity was classified as popular.
We found that babel-plugin-transform-react-pug demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 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.
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.