https://github.com/nanot1m/react-factory-elements

Small library helping to write react components w/o jsx
https://github.com/nanot1m/react-factory-elements

jsx proxy react react-elements react-factory

Last synced: 21 days ago
JSON representation

Small library helping to write react components w/o jsx

• Host: GitHub
• URL: https://github.com/nanot1m/react-factory-elements
• Owner: nanot1m
• License: mit
• Created: 2017-02-03T16:21:42.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-03T17:07:30.000Z (almost 8 years ago)
• Last Synced: 2024-11-22T22:04:03.705Z (30 days ago)
• Topics: jsx, proxy, react, react-elements, react-factory
• Language: JavaScript
• Size: 5.86 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-factory-elements

Small library helping to write react components w/o jsx

## Installation

! Requires Proxy, for IE and Safari < 9 use polyfills

```

npm i -S react-factory-elements

```

## Example

Simple elements

```javascript

import { elements, factory } from 'react-factory-elements'

import { render } from 'react-dom'

const { h1, div, p, ul, li, section } = elements

const Header = factory(({ children }) =>

  h1({ style: { color: 'violet' } }, children)

)

const FlexContainer = factory(({ children }) =>

  div({ style: { display: 'flex' } }, children)

)

const Page = factory(({ items }) =>

  section(

    Header('Hello world'),

    FlexContainer(

      ul({ style: { marginRight: '25px' } },

        items.map(item => li({ key: item }, `Item ${item}`))

      ),

      div(

        p('Oh, wait... what is it?'),

        p('Is it still react?')

      )

    )

  )

)

render(Page({ items: [1, 2, 3, 5] }), document.getElementById('app'))

```