bwarner / emotion-react-bootstrap

React component library for Bootstrap 4 using Emotion-JS CSS framework

Emotion React Bootstrap

A React component library for bootstrap using the [emotion-js](Emotion-JS framework)

Getting Started

Install emotion-react-bootstrap and Bootstrap from NPM. emotion-react-bootstrap does not include Bootstrap CSS so this needs to be installed as well:

npm install --save [email protected]
npm install --save @farvisionllc/emotion-react-bootstrap

Import required emotion-react-bootstrap components within src/App.js file or your custom component files:

import { Button } from '@farvisionllc/emotion-react-bootstrap';

Now you are ready to use the imported emotion-react-bootstrap components within your component hierarchy defined in the render method.

Development

Install dependencies:

npm install

Run examples at http://localhost:8080/ with webpack dev server:

npm start

Run tests & coverage report:

npm test

Watch tests:

npm run test-watch

Deployment

Add additional notes about how to deploy this on a live system

Built With

• Emotion JS - style as a function of state https://emotion.sh/

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Byron - Initial work - bwarner

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• Hat tip to anyone whose code was used
• Inspiration
• etc

emotion-react-bootstrap's Issues

Use new React context API

See https://reactjs.org/docs/context.html

Upgrade to the current version of Popper

There current version is using a very old version of react-popper

Table component not working

Tried simple example, but getting error: Element type invalid.

example component:

import _ from "lodash";

import React, { Component } from "react";
import ReactDOM from "react-dom";
import styled from 'react-emotion';

import {
  Container,
  Row,
  Col,
  Table,

} from "@farvisionllc/emotion-react-bootstrap";

class App extends Component {
  render() {
    return (
    <div>
      <Container>
          <Row>
            <Col>
              <Table>
                <tr>
                  <td> test table</td>
                </tr>
              </Table>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector(".container"));

error message screenshot: