jsx-semantic
v1.2.0
Published
Semantic HTML components written in JSX for React
Downloads
3
Readme
jsx-semantic
Semantic HTML components written in JSX for React
https://spkellydev.github.io/jsx-semantic
Install
npm install --save jsx-semantic
Usage
import React, { Component } from 'react'
import { Section, Div, P, H1, H2, H3, H4, H5, H6 } from 'jsx-semantic'
export default class App extends Component {
render () {
return (
<div>
<Section useTagAsClassName={false}>
<Div>
<H1>JSX Semantic</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
<P>Paragraph</P>
</Div>
</Section>
</div>
)
}
}
Available tags
export const Section = Tag('section')
export const Article = Tag('article')
export const Button = Tag('button')
export const Canvas = Tag('canvas')
export const Header = Tag('header')
export const Footer = Tag('footer')
export const Span = Tag('span')
export const Strong = Tag('strong')
export const Nav = Tag('nav')
export const Div = Tag('div')
export const Em = Tag('em')
export const Ul = Tag('ul')
export const Li = Tag('li')
export const H1 = Tag('h1')
export const H2 = Tag('h2')
export const H3 = Tag('h3')
export const H4 = Tag('h4')
export const H5 = Tag('h5')
export const H6 = Tag('h6')
export const P = Tag('p')
License
MIT © spkellydev