dennybritz / neal-react Goto Github PK

View Code? Open in Web Editor NEW

1.4K 1.4K 133.0 2.43 MB

Startup Landing Page Components for React.js

License: ISC License

CSS 11.68% JavaScript 88.32%

neal-react's People

Contributors

Stargazers

Watchers

Forkers

mariangibala munichjs developit danieljuhl garybyrd mashamba keppelen pcanterini ernestjohn ashwingithub thebitcorps ibrahsissoko colaborati anthonybrown artyom4d kristiyankrastev 796f n1889 dghijben mokuzaru circlus jdiss thesoftwarefactoryuk xmaximin locosoft1986 nremez gbaladi cxplanet jsooriah koolkt bysabi limweb funya joelsamuelk prsolans capouch kindrowboat saurabhdhupar imranansari mrmondejar wroxbox haidermalik12 barakethan kentchun33333 jerjohn15 jeffreyleeon arissetyawan bastyr jasonhargrove andresbuzzio ianlyons meiremans kristinbaumann marctorrent tasleemwilliams beijaflor-io baktakt georotzen eurismarpires mattapperson utopiaz blair-anson ignacionimo sachgits sabman sannilincoln macs03 tuksik chrismwendt fachrevi gbnk0 gerarduffy github-clonner meryem-elbayad jellydn carlh malkhalaf alexsicart xuanyuanzhang samgooi4189 ngoanhtan zavier-sanders robksawyer tamioom bala1074 javierelipadron joshuagautham trevor-coleman dark5eid83 caplu vikaskyadav dannyleiton sparker888 cyli2019 bisk1 peterj formago monkidea krofax solversa

neal-react's Issues

Add a Typeform example or some doc

Typeform integration seems not to be as straightforward as I though, tried different things, none of them work for now.

Any help ?

Please update to latest version

Please make this repo compatible with latest structor!

Add Social Media to Team Members Component

Refactor Pricing Table as Cards

bootstrap reset

Hi,

I have a bootstrap reset SCSS file in my project.
(I'm using Angle as my template).

This reset file, of course, change a lot the visibility of the neal page.
I'm looking for a way to exclude all the reset file for lean.
Any idea on a way to do it?

Thaks!

I tried using this library with an app that uses React 16 and I get errors that look to be due to use of deprecated features. Are there any plans to bring this library up-to-date with recent React changes?
thanks

Unknown prop `backgroundImage` on <div> tag

Use of {... this.props} is causing this error in the browser console:

Unknown prop `backgroundImage` on <div> tag

From https://facebook.github.io/react/warnings/unknown-prop.html

Are you using {...this.props} or cloneElement(element, this.props)? Your component is transferring its own props directly to a child element (eg. https://facebook.github.io/react/docs/transferring-props.html). When transferring props to a child component, you should ensure that you are not accidentally forwarding props that were intended to be interpreted by the parent component.

incompatible with React 16?

FF Images on demo are not responsive

Please take a look to this screenshot.
https://www.dropbox.com/s/akydga2wxnchtm3/Screenshot%202015-11-04%2011.31.27.png?dl=0

Can't override renderBody method on SignupModal component

I created a custom component based on SignupModal:

import React from "react";
import {
  SignupModal
} from "neal-react";

export class FeedbackModal extends SignupModal {
  renderBody() {
    if (this.props.children) return this.props.children;
    return (
      <div>
        <SignupModal.Input name="name" label="Имя" placeholder="Имя"/>
        <SignupModal.Input type="email" name="email" required label="E-mail" placeholder="E-mail"/>
        <SignupModal.TextArea name="message" required label="Сообщение" placeholder="Сообщение"/>
      </div>
    );
  }
}

Then i'm using it like so:

<FeedbackModal title="Обратная связь" buttonText="Отправить" modalId="feedback-modal" onSubmit={onFeedback}/>
<p>
    <a className="btn btn-primary btn-ghost" data-toggle="modal" data-target="#feedback-modal">Оставить отзыв</a>
</p>

The problem is that the original renderBody is getting called.

I tried to override a render method as well to examine which class the renderBody's method prototype belongs to. It turns out it points to the original SignupModal class.

Why is this happening? I'm quite new to ES6, but haven't found anyone having similar issues.
Is it because neal-react ships already transpiled code?

Using ES6 features in older browsers

Currently available versions of Internet Explorer used in Windows 7, Window 8.1, Windows Phone 8.1 and Windows 10 do not support ES6 (e.g. Object.assign) natively, and there are no polyfills included with neal-react for ES6 features it uses.

Due to this issue, a neal-react-based landing page (i.e. nealjs.com) cannot be opened on a Windows phone at all, as there are no third-party browsers for this platform.

neal-react need media queries

Hi @dennybritz. We need mediaqueries for Navbar code. I like very much current simple and clean aproach but I cannot put any logic on childrens cause this component are add twice on Navbar render.
I create a mediaquery module for this: https://www.npmjs.com/package/react-mediaquery-props

And rewrote Navbar like this.

import React from "react";
import classNames from "classnames";
import { mediaQuery } from "./media-query.jsx";
import { mdUp } from "./bootstrap4-media-query.js";

export const Navbar = mediaQuery(class Navbar extends React.Component {

  static propTypes = {
    brand: React.PropTypes.node.isRequired,
  };

  render() {
    const _className = classNames("navbar neal-navbar", this.props.className);

    const mdUp = this.props.mq.mdUp
      ? { id: 'header-nav', div: '', ul: 'pull-right' }   // medium Up
      : { id: 'mobile-nav', div: 'collapse neal-mobile-nav', ul: '' };

    return (
      <header className="neal-navbar-wrapper">
        <nav className={_className}>
          <div className="container">
            <button className="navbar-toggler hidden-md-up" type="button" data-toggle="collapse"
              data-target="#mobile-nav">
              &#9776;
            </button>
            <a className="navbar-brand hidden-sm-down" href="/">{this.props.brand}</a>
            <div className={`navbar-toggleable-sm ${mdUp.div}`} id={mdUp.id}>
              <ul className={`nav navbar-nav ${mdUp.ul}`}>
                {this.props.children}
              </ul>
            </div>
          </div>
        </nav>
      </header>
    );
  }
}, mdUp);

Tell me is OK for you and I will make a PR.

Custom Fields for Signup Modal

Signup modal should support custom fields besides the default name and email. How to keep the markup simple but make it flexible?

Site Generator

Add a generator for scaffolding a new project similar to neal-sample. Should include:

README
Basic Page
Build scripts
Linting best practices
Deployment script
Dockerfile / Development environment

problems with import bootstrap in base.scss

The current import is

@import '../node_modules/bootstrap/scss/bootstrap';

But with npm 3 if you use bootstrap in your app it will most of the time will be in the main node_modules folder instead of inside neal-react.
Then the import should be (one folder up)

@import '../../node_modules/bootstrap/scss/bootstrap';

typo on sample landing page

Under the "batteries included"...
"repetetive" should be "repetitive"...sorry could not figure out a better place to report this

[License issue] Please help update license for community growth

We appreciate your great work ! It'd be great if this PJ was Apache license. Please help change current license into Apache license. There will be many contributors waiting for your consideration !. Once again, because it's open-source, because community growth and because the world of happy coding !
Many thanks !

Thanks for this, looks like a very neat project!

Not very familiar with React, tried to do, but unsuccessfully:

<div className="neal-pricing-plan-price-amount"><i className="fa fa-rub"></i> {this.props.price}</div