Mobile App Framework powered by React

Last update: Jun 17, 2022
Comments
  • 1. Roadmap and timelines 1.0?

    Hi! In the search for an alternative to ionic, we've recently stumbled upon Touchstone. I must say, I'm impressed and would really like to embrace React by using Touchstone in our mobile apps.

    However, for actually using Touchstone in future production apps, it's important for us to know if you guys are planning to put more work into this. So, is there a roadmap or are there perhaps already some projected timelines?

    Furthermore, the only thing we can see here from the outside is the activity on these repos. Are you internally working on Touchstone in a private repo?

    Reviewed by jasperkuperus at 2015-09-29 08:19
  • 2. Mobile only?

    Is this framework responsive such that both tablet and mobile designs can be accounted for in the same app, with media queries governing the necessary layout changes? This is where Ionic failed imo.

    Reviewed by MMRandy at 2015-09-19 00:34
  • 3. App.views intentionally exposed?

    Hey @JedWatson,

    I just wanted to confirm that this.views is meant to be exposed on the App object? See here.

    I refactored that part of the code because we had 3 different definitions of views in the scope.

    Reviewed by dcousens at 2015-06-05 00:59
  • 4. Removed not used proptypes and added nametag to UI.LabelTextArea

    I wanted to use UI.LabelTextArea with react-form-data, but that needs that all input fields have names. That possibility was not added to UI.LabelTextArea.

    Alternative solution would also be to pass all attributes on UI.LabelTextArea to the textarea itself via spread.

    Any preferences?

    PS: I also removed not used proptypes.

    Reviewed by KeKs0r at 2015-03-16 21:38
  • 5. Add a new DatePicker component and improve the Popup component.

    1. Add DatePicker, DatePickerPopup components.
    2. Add LabelValue component, used as the field of DatePickerPopup in a form.
    3. Improve Popup component: now it could be arbitrary width.
    Reviewed by supnate at 2015-08-15 08:36
  • 6. Taps can incorrectly pass through to the next view after a transition

    We handle tap events with react-tappable, which fires an event after detecting a touchstart / touchend combination. Sometimes, WebKit also fires a click event after 300ms. This is automatically blocked from firing additional tap events on other tappable elements.

    Unfortunately other components that natively respond to the click event may still do so during a view transition, incorrectly focusing a field or causing other unexpected behaviour.

    Probably the best workaround for this is to display a blocking element (transparent div) over the entire UI during transitions that captures the subsequent click event, although I'd love to hear any other ideas on how we can handle this.

    Reviewed by JedWatson at 2014-12-17 03:10
  • 7. Yet another react 0.1.4 upgrade PR

    Just submitting the work I had already started few days ago, also took the change to move the dependencies into peerDependencies so we don't have to force host projects into a specific react version.

    Upgrade went smoothly as described by #95 already, there isn't much differences between both, but I believe this one has less changes.

    There is still warnings with ReactCSSTransitionGroup Failed propType: transitionEnterTimeout wasn't supplied to ReactCSSTransitionGroup that couldn't be fixed because it breaks the animations/transitions.

    The touchstone starter and tasks projects need also to be updated to work correctly after this change.

    fixes #89 #95

    Thanks

    Reviewed by thiagofelix at 2015-11-19 17:43
  • 8. Transition doesn't work from list to detail view

    When accessing demo.touchstonejs.io using safari on iPhone, there is no transition when clicking a list item to show the detail view. It works well when back from detail to list.

    Reviewed by supnate at 2015-07-06 09:55
  • 9. FlexLayouts and Swiper.js

    Hi,

    I am trying to build the new version of my app with touchstone and I am loving it so far. I am completely aware that it is still in a very early stage. I wanted to swiper.js in order to build a subnavigation for on of my views. Unfortunately the swiper.js containers do not seem to work with the Flexlayout.

    Is there a plan to build a swiper component for touchstone itself? If not I am willing to build one, based on swiper.js if others are interested and somebody can lead me into the right direction.

    Here is my current approach:

    module.exports = React.createClass({
        displayName: "swiper_view",
        getInitialState: function(){
            return {
                activeSlide: 0
            }
        },
        componentDidMount: function() {
            var self = this;
            this.swiper = new Swiper (this.refs.swiper.getDOMNode(), {
                direction: 'horizontal',
                loop: false,
                onSlideChangeEnd: self._onSlideChangeEnd
            });
        },
        _onSlideChangeEnd: function(swiper){
           this.setState({activeSlide: swiper.activeIndex});
        },
        _handleToggle: function(slide){
            this.swiper.slideTo(slide);
        },
        render: function(){
            return (
                <UI.FlexLayout className={this.props.viewClassName}>
                    <UI.Headerbar label="Swiper Container" />
                    <UI.Headerbar height="36px" className="Subheader">
                        <UI.Toggle value={this.state.activeSlide} onChange={this._handleToggle} options={[
                            { label: 'Slide 1', value: 0 },
                            { label: 'Slide 2', value: 1 },
                            { label: 'Slide 3', value: 2 }
                        ]} />
                    </UI.Headerbar>
                    <UI.FlexBlock grow>
                        <div className="swiper-container" ref="swiper">
                            <div className="swiper-wrapper">
                                <div className="swiper-slide">
                                    <UI.FlexBlock scrollable grow >
                                        This is the main container that should show content and be scrollable!
                                        Content can be very long!
                                    </UI.FlexBlock>
                                </div>
                                <div className="swiper-slide">
                                    <UI.FlexBlock scrollable grow >
                                        This is the content of the second slide, which can be reached by clicking on the
                                        subnavigation or swiping on the screen.
                                        <br /><br /> <br /><br /><br /> <br />
                                        Now more content
                                        <br /><br /> <br /><br /><br /> <br />
                                        And more!
                                    </UI.FlexBlock>
                                </div>
                                <div className="swiper-slide">
                                    <UI.FlexBlock scrollable grow >
                                        Last Slide
                                    </UI.FlexBlock>
                                </div>
                            </div>
                        </div>
                       <UI.Footerbar height="50px" type="default">
                          <UI.FooterbarButton icon="ion-trophy" disabled />
                          <UI.FooterbarButton icon="ion-earth" />
                          <UI.FooterbarButton icon="ion-bag" />
                          <UI.FooterbarButton icon="ion-ios7-person" />
                          <UI.FooterbarButton icon="ion-more" />
                      </UI.Footerbar>
                    </UI.FlexBlock>
                </UI.FlexLayout>
            );
        }
    });
    

    The Problem with it is, that within the different slides, the scrolling flexbox is not working. Even if there is more content I cant scroll, although the scrollbar is visible.

    Reviewed by KeKs0r at 2015-03-16 23:09
  • 10. Form Components

    I hope you don't mind me using your issue list as a placeholder for the things I'd like to see! Regarding forms there needs to be:

    • Textfield
    • Textarea
    • Checkbox/toggle
    • Select & multiselect
    • Date and Time
    • Disabled/readonly states

    Is this on your hitlist? Would be good to see a roadmap on the wiki too. I'll be free in the new year to spend some time on this I think and having a list of priorities might be handy.

    Reviewed by colinramsay at 2014-12-07 14:20
  • 11. Closing native keyboard on ipad causes content 'clipping' until next screen event

    Hi, has anyone played with Touchstone on iPad much yet? Ive noticed an ugly artefact when using native keyboards such that after they slide away, content becomes clipped (about half a screens worth) and doesn't redraw until you touch the screen/change orientation etc.

    I'll investigate the issue some more but wanted to mention it now incase it's a known issue.

    To reproduce; load the touchstone sample app onto an iPad (mine was a 4th Gen - late 2012), go to the 'Form Fields' section and click an input, click on the screen to make the keyboard go away, clipping bug should be visible.

    Reviewed by gregtillbrook at 2015-04-20 16:26
  • 12. Error when run the starter app on Android phone as cordova app

    Hello touchstonejs team,

    I''d like to report you an error when I compiled the starter project and then run it in my Android phone (LG G3 Android 5.0). I noticed this following error in my Chrome Developer inspect window, when my phone running the app: image This error prevents the app from changing its UI elements when receiving touches ( such as displaying other view when I touched Forms, Control, Transitions tab menu).

    System Environment:

    • Build Machine: PC run Linux Ubuntu 16.04
    • Cordova's version: 6.3.1
    • Phone: LG G3 runs Android 5.0
    Reviewed by WendySanarwanto at 2016-10-23 01:27
  • 13. Add Tappable onTap event handler to Popup backdrop.

    As a user, when there is a popup open, it feels like I should be able to "abort" the popup by tapping in outside the popup (the backdrop). For some popups, this may be the right behaviour, and for some other popups (which want to force the user to take some action before moving on) this may not be the right behaviour.

    For example, when using the DatePickerPopup, it really feels like I should be able to tap the backdrop to express "I don't want to pick a different date - the currently selected date is fine and I don't want to be in this popup". Every time I'm testing my app, I feel the urge to click outside the popup to cancel the date selection and keep the current date, but after that fails to have the desired effect I have to click back on the currently selected date to close the popup. But for a popup where the user is asked to save the current data before quitting, or quit and lose all unsaved data, you really want the user to pick one of the available options instead of "aborting" - a somewhat ambiguous outcome.

    Since closing the popup when tapping the backdrop is desired behaviour in some cases, but not in others, it seems like the best course of action is to make it Tappable, but allow the developer to bind (or not bind) a function to the onTap of the Tappable, by passing in the function as some appropriately named prop of the Popup.

    Would a PR for such a change be well-received? If so, what should the name of the new Popup prop be - onTapBackdrop?

    Reviewed by jemc at 2016-06-19 04:42
  • 14. Demo on homepage is broken

    The demo on http://touchstonejs.io/ (not http://demo.touchstonejs.io/ which I guess is not up to date) is completely broken. This is what I see in the console:

    Download the React DevTools for a better development experience: https://fb.me/react-devtools
    site.js:22633 Warning: Unknown DOM property frameborder. Did you mean frameBorder?
    site.js:22633 Warning: Unknown DOM property novalidate. Did you mean noValidate?
    touchstonejs.github.io/:51 GET http://touchstonejs.github.io/touchstonejs-starter/cordova.js 
    app.js:7167 Uncaught TypeError: Cannot set property 'id' of undefined(anonymous function) @ app.js:7167(anonymous function) @ app.js:7166(anonymous function) @ app.js:1359(anonymous function) @ app.js:2427loadFunc @ app.js:2299readystatechange @ app.js:2229
    app.js:3797 Link to "tabs:list-complex" using transition "show-from-right" with props  undefined
    app.js:7828 Uncaught TypeError: Cannot read property 'category' of undefined
    

    Thank you!

    Reviewed by chpmrc at 2016-04-14 09:17
  • 15. Update React to 15.0.1 since "^0.14.0" will miss out 15.x.x.

    I can't update my React version because React has changed its major version (0.14.8 to 15.0.1), which doesn't match the react peerDependency spec: "^0.14.0".

    Reviewed by jessedvrs at 2016-04-13 09:00
  • 16. What is the proper way to inject external JS libraries?

    For example, if I wanted to use jQuery, loDash, or Underscore. I think the standard way to include them would be to ..

    npm install --save jquery npm install --save underscore npm install --save lodash

    Which would add it to the package.json . But for some reason, after doing this, it still isn't accessible.

    Out of curiosity, is there something within TouchStoneJS that is overriding this?

    Here is my related SO post : http://stackoverflow.com/questions/36405506/how-can-i-properly-require-a-library-via-require-npm

    Reviewed by gotoAndBliss at 2016-04-05 11:52
Maple.js is a React webcomponents based framework mixing ES6 with Custom Elements, HTML Imports and Shadow DOM. It has in-built support for SASS and JSX, including a Gulp task for vulcanizing your project.
Maple.js is a React webcomponents based framework mixing ES6 with Custom Elements, HTML Imports and Shadow DOM. It has in-built support for SASS and JSX, including a Gulp task for vulcanizing your project.

Heroku: http://maple-app.herokuapp.com/ npm: npm install maple.js Bower: bower install maple.js Maple is a seamless module that allows you to organise

Feb 28, 2022
A React framework for building text editors.
A React framework for building text editors.

Draft.js Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model. Extensible and Customizable: We provid

Jun 23, 2022
A completely customizable framework for building rich text editors. (Currently in beta.)
A completely customizable framework for building rich text editors. (Currently in beta.)

A completely customizable framework for building rich text editors. Why? · Principles · Demo · Examples · Documentation · Contributing! Slate lets you

Jun 26, 2022
👻 Zero-configuration framework-agnostic static prerendering for SPAs
👻 Zero-configuration framework-agnostic static prerendering for SPAs

react-snap Pre-renders a web app into static HTML. Uses Headless Chrome to crawl all available links starting from the root. Heavily inspired by prep

Jun 22, 2022
Fire7 is a small library that implements real-time data binding between Firebase Cloud Firestore and your Framework7 app.

Fire7 is a small library that implements real-time data binding between Firebase Cloud Firestore and your Framework7 app.

May 15, 2022
React, React Native and Vue UI components for building data-driven apps with Elasticsearch
React, React Native and Vue UI components for building data-driven apps with Elasticsearch

Reactive Search UI components library for Elasticsearch: Available for React, Vue and React Native Read how to build an e-commerce search UI a.) with

Jun 23, 2022
⚡️ Lightning-fast search for React and React Native applications, by Algolia.
⚡️ Lightning-fast search for React and React Native applications, by Algolia.

React InstantSearch is a library for building blazing fast search-as-you-type search UIs with Algolia. React InstantSearch is a React library that let

Jun 19, 2022
React ESI: Blazing-fast Server-Side Rendering for React and Next.js
React ESI: Blazing-fast Server-Side Rendering for React and Next.js

React ESI: Blazing-fast Server-Side Rendering for React and Next.js React ESI is a super powerful cache library for vanilla React and Next.js applicat

Jun 18, 2022
react-pdf-highlighter is a React library that provides annotation experience for PDF documents on web.

☕️ Buy me a coffee react-pdf-highlighter react-pdf-highlighter is a React library that provides annotation experience for PDF documents on web. It is

May 20, 2022
React-cursor-chat - A react component for cursor chat
React-cursor-chat - A react component for cursor chat

@yomo/react-cursor-chat ?? Introduction A react component for cursor chat Press

Jun 8, 2022
Automatically AJAXify plain HTML with the power of React. It's magic!

React-Magic and HTMLtoJSX React-Magic is an experimental library that uses the power of Facebook's React library to inject AJAX-loading goodness into

Jun 21, 2022
A set of React components implementing Google's Material Design specification with the power of CSS Modules
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

Jun 19, 2022
CSS media queries in react - for responsive design, and more.

react-responsive Information Package react-responsive Description Media queries in react for responsive design Browser Version >= IE6* Demo The best s

Jun 19, 2022
Immutable state for React.js
Immutable state for React.js

react-cursor Immutable state for React.js react-cursor hello-world in a fiddle What is react-cursor Cursors are a tool for working with recursive or d

Jun 18, 2021
Centrally manage state for React applications with CSP

State Trooper Install npm npm install state-trooper Yarn yarn add state-trooper Example Usage Call StateTrooper.patrolRunLoop in your route handler/ma

May 14, 2022
A performant, scalable and pluggable approach to instrumenting your React application.
A performant, scalable and pluggable approach to instrumenting your React application.

react-i13n react-i13n provides a performant, scalable and pluggable approach to instrumenting your React application. Typically, you have to manually

May 22, 2022
svg react icons of popular icon packs

React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons

Jun 17, 2022
Plain functions for a more functional Deku approach to creating stateless React components, with functional goodies such as compose, memoize, etc... for free.
Plain functions for a more functional Deku approach to creating stateless React components, with functional goodies such as compose, memoize, etc... for free.

"Keo" is the Vietnamese translation for glue. Plain functions for a more functional Deku approach to creating stateless React components, with functio

May 11, 2022
Configure and build views using JSON schemas mapped to React components

react-json-schema npm install react-json-schema Construct React elements from JSON by mapping JSON definitions to React components. Use react-json-sch

Jun 14, 2022