https://github.com/dance2die/dangerous
☢⚛ Create dangerous React components in style
https://github.com/dance2die/dangerous
dangerouslysetinnerhtml npm npm-package react react-hook react-hooks reactjs setdangerouslysetinnerhtml styled-components tagged-template-literals typescript
Last synced: about 2 months ago
JSON representation
☢⚛ Create dangerous React components in style
- Host: GitHub
- URL: https://github.com/dance2die/dangerous
- Owner: dance2die
- License: mit
- Created: 2019-01-12T00:59:02.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-03T02:36:38.000Z (over 6 years ago)
- Last Synced: 2025-03-20T20:17:03.111Z (2 months ago)
- Topics: dangerouslysetinnerhtml, npm, npm-package, react, react-hook, react-hooks, reactjs, setdangerouslysetinnerhtml, styled-components, tagged-template-literals, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/dangerous
- Size: 390 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ☢ dangerous
A utility function to create a dangerous/unsafe React component using tagged literal
templates.
The syntax is borrowed from [Styled Components](https://www.styled-components.com/).
`dangerous` returns a component, which uses
[dangerouslySetInnerHTML](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml)
internally to convert your dangerous input to set literal to DOM's innerHTML
value.
# ⚠️ Requirement
Minimum required version of React is v16.3.0 because `dangerous` uses [React.forwardRef](https://reactjs.org/docs/react-api.html#reactforwardref), which was [introduced in v16.3.0](https://reactjs.org/blog/2018/03/29/react-v-16-3.html#forwardref-api).
## Installation
```sh
$ npm i dangerous
# or
$ yarn add dangerous
```
## ✍ Usage
### 👶 Basic Usage
You can pass raw HTML to `dangerous` using tagged template literal.
```js
const DangerousComponent = dangerous.div`💖 & 🕊`;
// or
const DangerousComponent = dangerous('div')`💖 & 🕊`
```
You can Subtitute `div` with any valid [DOM elements](https://github.com/dance2die/dangerous/blob/master/src/domElements.ts) or a custom React component.
```js
const DangerousComponent = dangerous.span`💖 & 🕊`
const DangerousComponent = dangerous.p`💖 & 🕊`
const DangerousComponent = dangerous.section`💖 & 🕊`
// and
const DangerousComponent = dangerous(CustomComponent)`💖 & 🕊`
```
#### Render Result
Dangerous component will set `&emp;` directly so the rendered result will show
```html
💖 & 🕊
```
while React will render it as
```html
💖 & 🕊
```
as shown below.
### 🐱👤 Advanced Usage
`dangerous` returns a React component, to which you can pass props, which you can access within tagged template literal.
```js
const DangerousComponent = dangerous.div`
Who am I?
Last Name is "${props => props.lastName}"
First Name is "${props => props.firstName}"
Show Alert`;
function App() {
return ;
}
```
In the code above, `` is passed following props in `App`.
1. `firstName="Sung"`
1. `lastName="Kim"`
You can access the props in the tagged literal using `${props => props.properyName}`.
_This was taken directly from [Styled Component syntax](https://www.styled-components.com/docs/basics#passed-props)._
And you can destructure props and combine it to compose any string you want.
```js
const DangerousComponent = dangerous.div`
//... omitted for brevity
Show Alert`;
```
### ⤵ Return object
`dangerous` returns a React component and behaves like a HoC ([High-order Component](https://reactjs.org/docs/higher-order-components.html)).
If a custom component is passed to `dangerous`, then all static properties will be hoisted down to the wrapped component.
# 👨💻 Example
The example below shows how to use `dangerous` with a custom `Block` components with static properties and Styled Components, `StyledDangerous` & `StyledBlock`.
It also demo's wrapping `StyledBlock` (a Styled Component component 😅) with `dangerous` as `DangerousStyled`.
[](https://codesandbox.io/s/q7vn2p20rq)
```jsx
import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import dangerous from "dangerous";
import "./styles.css";
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
;
}
}
const Dangerous = dangerous.div`
Who am I?
Last Name is "${props => props.lastName}"
First Name is "${props => props.firstName}"
Show Alert`;
const StyledDangerous = styled(Dangerous)`
background-color: papayawhip;
padding: 1.5em 0;
`;
const StyledBlock = styled(Block)`
background-color: hotpink;
padding: 1.5em 0;
`;
const DangerousStyled = dangerous(StyledBlock)`
Alter Ego
Click link below to find out who my alter ego is
Show Aleter Ego Name
`;
function App() {
return (
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
```
### 🥊 Demo in action
# 💪 To Dos
1. Create a GitHub project for version 1.
1. Add TypeScript types
1. Add TypeScript definition files to distribution
1. Add tests
1. Update Logo to look as stylish as that of Styled Components's. 😄