Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import styled from "styled-components";
import dangerous from "dangerous";
import "./styles.css";
// const Block = ({ ...props }) => <div {...props} />;
class Block extends React.Component {
// To check if static fields are hoised correctly
static count = 10;
static increaseCount = () => console.log(++Block.count);
static decreaseCount = () => console.log(--Block.count);
render() {
return <div {...this.props} />;
}
}
// const Dangerous = dangerous.div`
const Dangerous = dangerous(Block)`
<h1>Who am I?</h1>
<p>Last Name is "${props => props.lastName}"</p>
<p>First Name is "${props => props.firstName}"</p>
<a href="javascript:alert('hi');">Show Alert</a>
`;
const StyledDangerous = styled(Dangerous)`
background-color: papayawhip;
padding: 2em 0;
`;
const StyledBlock = styled(Block)`
background-color: hotpink;
padding: 2em 0;
`;
const DangerousStyled = dangerous(StyledBlock)`
<h1>Alter Ego</h1>
<p>Click link below to find out who my alter ego is</p>
<a href="javascript:alert('${props => props.name}');">Show Aleter Ego Name</a>
`;
function App() {
return (
<div className="App">
<section>
<StyledDangerous firstName="Sung" lastName="Kim" />
<DangerousStyled name="dance2die" />
</section>
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.