Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use react-bootstrap components with custom tags directly in html. #506

Closed
ph101pp opened this issue Apr 11, 2015 · 2 comments
Closed

Use react-bootstrap components with custom tags directly in html. #506

ph101pp opened this issue Apr 11, 2015 · 2 comments

Comments

@ph101pp
Copy link

ph101pp commented Apr 11, 2015

Hello,
I'm the author of react-mount, a module that lets you use custom tags to place react components directly in html.
The use with react based front end frameworks has been the main reason to build this module and react-bootstrap has always been my main example.

So after publishing v0.1.0 I wanted to share with you what a powerful combination react-mount and react-bootstrap can be:

// mount.js
var mount = require("react-mount");
var bootstrap = require("react-bootstrap");

mount(
  bootstrap, 
  {
    preserveAttributes: ["offsetTop","offsetBottom","onDismiss","dismissAfter","pullRight","bsClass","bsSize","bsStyle","navDropdown","navItem","componentClass","defaultActiveIndex","activeIndex","pauseOnHover","onSlideEnd","onSelect","onAnimateOutEnd","animateIn","animateOut","defaultExpanded","eventKey","activeKey","activeHref","noCaret","hasFeedback","groupClassName","addonBefore","addonAfter","buttonBefore","buttonAfter","wrapperClassName","labelClassName","onClick","closeButton","onRequestHide","defaultNavExpanded","onToggle","navExpanded","fixedTop","fixedBottom","staticTop","toggleButton","toggleNavKey","defaultOverlayShown","onMouseOver","onMouseOut","onFocus","onBlur","delayShow","delayHide","defaultActiveKey","positionLeft","positionTop","arrowOffsetLeft","arrowOffsetTop","isChild","srOnly","interpolateClass","dropdownTitle","autoFocus","checkedLink","valueLink","onChange","isReactClassApproved","hasOwnProperty","dangerouslySetInnerHTML","defaultValue","defaultChecked","isReactClassApprove"]
  }
);

After mounting react-bootstrap, all bootstrap components can be used directly in HTML:

<!-- index.html -->
<body class="container">
    <Carousel>
      <CarouselItem>
        <img width={1140} height={500} alt='1140x500' src='http://placekitten.com/g/1140/500'/>
        <div class='carousel-caption'>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
      </CarouselItem>
      <CarouselItem>
        <img width={1140} height={500} alt='1140x500' src='http://placehold.it/1140x500'/>
        <div class='carousel-caption'>
          <h3>Second slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
      </CarouselItem>
      <CarouselItem>
        <img width={1140} height={500} alt='1140x500' src='http://placehold.it/1140x500/ff00ff/ffff00'/>
        <div class='carousel-caption'>
          <h3>Third slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
      </CarouselItem>
    </Carousel>

    <!-- mount complete react-bootstrap -->
    <script src="browserified_mount.js"></script>

  </body>

I hope you like what you see. Thoughts and suggestions are always welcome.

Thanks for all the work on react-bootstrap!

cheers
Philipp
@mtscout6
Copy link
Member

Thanks for sharing! I'm sure there are some folks out there that would be interested in this. I'm not sure what you would want us to do though. I guess you could submit a PR to the README with a link to your project similar to the link to react-router-bootstrap. I think that's about as far as we would go with this though.

ph101pp pushed a commit to ph101pp/react-bootstrap that referenced this issue Apr 26, 2015
@Greenish
Add react-mount module to Related Modules. react-bootstrap#506
88679f0
@AlexKVal AlexKVal mentioned this issue Apr 26, 2015
Closed
@AlexKVal
Copy link
Member

I propose to continue discussion in the related PR #575 about this topic.
This issue I'm closing.

@aindlq aindlq mentioned this issue Jul 25, 2015
Closed
aryad14 pushed a commit to aryad14/react-bootstrap that referenced this issue Oct 11, 2023
@greenkeeper @ad1992
chore(package): Update eslint to the latest version 🚀 (react-bootstra…
52c76a1 
…p#506)

* chore(package): update eslint to version 5.15.0

* chore(package): update lockfile package-lock.json
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@ph101pp @mtscout6 @AlexKVal