react-efl

Allows to represent Enlightenment Efl components as a DOM structure.

Example

<Win>
    <Group name={'text-block'}
           position={pos}
           zoom={{sx: -10, sy: -10, x: 200, y: 21}}
           rotate={{d: -5, x: 200, y: 21}}>
        <Rectangle position={pos}
                   size={{ w: 400, h }}
                   color={{ r: 200, g: 200, b: 200 }}/>
        <Image position={pos}
               size={size}
               file={'http://example.com/logo.png'} />
        <Text position={{ x: 70, y }}
              color={'#F55'}
              font_size={h}
              linesize={h}
              valign={'middle'}>
            react-efl <Color color={'#00A'}>demo</Color>
        </Text>
    </Group>
</Win>

It can be interesting to render an EFL view in the browser and see its representation from the React Chrome Developer tools

Current Status

Very Basic implementation of the Efl.Canvas Group, Rectangle, Image, & Text

Support most of the Evas TextBlock Style definitions (more information in the Evas support dedicated page)

Roadmap

1. Add Unit tests
2. Handle positioning
3. Support more Group, Rectangle, Image, & Text features
4. Support more Efl.Object & Efl.Canvas level features
5. some Animations features
6. Many potential things like Videoor Player support, or anything requested via the Issues project page ...