dennybritz / neal-react Goto Github PK
View Code? Open in Web Editor NEWStartup Landing Page Components for React.js
License: ISC License
Startup Landing Page Components for React.js
License: ISC License
Typeform integration seems not to be as straightforward as I though, tried different things, none of them work for now.
Any help ?
Please make this repo compatible with latest structor!
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
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.
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
Please take a look to this screenshot.
https://www.dropbox.com/s/akydga2wxnchtm3/Screenshot%202015-11-04%2011.31.27.png?dl=0
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?
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.
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">
☰
</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.
Signup modal should support custom fields besides the default name
and email
. How to keep the markup simple but make it flexible?
Add a generator for scaffolding a new project similar to neal-sample. Should include:
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';
Under the "batteries included"...
"repetetive" should be "repetitive"...sorry could not figure out a better place to report this
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 !
As far as I can see, jQuery
is loaded only to use getScript()
. Would it be an idea to refactor to vanilla JS instead? I'm happy to give it a try, if you interested in a PR. I don't like loading jQuery just for that single method.
I was curious to see a demo.
Let me know when it's up :)
This repo points to nealjs, which has either been hijacked or is an intentional malware. The site asks you to click a "security button", which then opens a dialog box for installing a chrome extension that can access & alter all websites/pages.
Just curious.
I'd like a component similar to the signup component, but for just requesting an email address for subscribing to a MailChimp or other list.
I guess this is somewhat related to #8, but in the absence of a solution there, capturing emails is one feature I was surprised to see missing.
Thanks for this, looks like a very neat project!
Extend airbnb's ESLint default from https://github.com/walmartlabs/eslint-config-defaults/
FYI the nealjs.com site is 404-ing at the moment.
$
symbol has a wide support of web fonts, but some currency, for example Russian ruble \u20BD
has not.
It would be nice to be able to select the currency symbol in pricing-table
component.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.