I am optimizing a react/redux app and I wondered if there is the best practice to store and render hardcoded strings in such an app? Some of my components are using the same text and if there is a text change I will have to search all for all text occurrences. Would be better to have central location. I mean some static contents that y you do not want to put into state.
I would store all texts in a json object but I assume there must be a better way.
could anyone share his/her experience? any helpful tools or packages?
thank a lot for your answers!
Nothing special here really regarding react or redux, you could just create a constants file...
export const VAR_NAME = "this is some text";
export const ANOTHER_VAR = "something else";
then when you want to use, simply:
import { ANOTHER_VAR } from 'path/to/constants/file';
thank you for comments. In case, someone looks for nice solution this is - https://github.com/yahoo/react-intl
Requires some setup though but does what I wanted through making first steps towards internalization of the app.
Related
I know this sounds like a big ask, but I'm assuming someone else has already done this and has a simple answer because it seems like an obvious use case.
Twilio has a sample app available on GitHub for their video service. Unfortunately, I don't know much about react, so I was able to make a couple of little changes, but this one has me stumped.
The code is called: Twilio / twilio-video-app-react
https://github.com/twilio/twilio-video-app-react
When you launch the code to enter a video room, you are presented with a form to enter your name and the name of a video room. I need to remove that room name input field and replace it with a hidden variable that was provided in the URL. In other words:
Get a room name variable that was passed as a query parameter on the URL
Make sure the room name is "safe" (alphanumeric) and then put it into a hidden variable in the form
Remove the visible input field (room name) from the form
That would take me two minutes in PHP, and it's probably really easy in react as well, but I can't figure it out. Hope someone can point me in the right direction.
I've run into an challenge/posible incompatibility between gatsby-source-graphcms and gatsby-plugin-react-i18next, for which there appears to be virtually no information online and I'm wondering if anyone else has encountered this before please.
I'm working on adding localisation to a site which uses gatsby-source-graphcms and the Gatsby File System Route API to build pages dynamically. Everything was going fine, until I tried to use the $language GraphQL query variable made available by gatsby-plugin-react-i18next with the locale filter field in GraphCMS, which yielded this error message:
Variable "$language" of type "String!" used in position expecting type "GraphCMS_Locale"
The one and only reference I've been able to find to a similar issue was on GraphCMS' public Slack, where someone referred to abandoning gatsby-source-graphcms I favour of gatsby-source-graphql due to this. However I'm hesitant to do this, as that would basically means re-writing the entire site for me! 😢
I've been trying to find some way to feed the page query a second variable, which duplicates the value $language variable from gatsby-plugin-react-i18next but is declared as the correct data type for GraphCMS, or perhaps to somehow cast the string to GraphCMS_locale but have had no luck so far.
Has anyone found a way to make gatsby-source-graphcms play nicely with gatsby-plugin-react-i18next please?
The WIP code for this can be seen here: https://github.com/binghamchris/paddelbuch/blob/feature-i18n/src/pages/index.js
Apologies if the code is a bit bad somewhere. I'm not a web dev (this is a community project I'm volunteering on, where there's no professional web devs) and am really just hacking away on copy-and-paste code 😉
Thanks in advance for any help anyone can offer
I found a super hacky workaround, inspired by #notrab's kind help, in case it helps anyone else:
I added the following to gatsby-node.js:
exports.createSchemaCustomization = ({
actions: { createTypes, printTypeDefinitions }
}) => {
createTypes(`
type Locale implements Node {
language: GraphCMS_Locale
}
`);
};
This changes the GraphQL data type on the language field in the i18next translation data to GraphCMS_Locale, which then means both data types needed by both gatsby-plugin-react-i18next and gatsby-source-graphcms match... and so far it seems to be working in dev mode!
Does anyone know of a way to translate Word syntax into react-markdown?
I am releasing a website to a client who is not very practical with writing using markdown.
So i thought maybe he could write the descriptions to add to the website on a Word file and then convert it into a markdown style and easy peacy.
Also, i tried to replicate this kind of list:
List item
buy using either + or * or - but react-markdown doesn't recognise them.
Any idea on how to takle the issue?Any info are more than welcome. Many thanks
I have an object that contains content for a page, I import it and try to use it like you'd use any object variable:
import {Variable} from 'data'
const message = defineMessages({
message: {
id: 'component.title',
defaultMessage: Variable.title
}
})
However, I get React Intl] Messages must be statically evaluate-able for extraction.. I googled a lot and found no solution to this. I'm using babel-plugin-react-intl to generate the locale files, and a contributor said that Babel can only parse simple statically messages
It's hard to believe there's no way to be able to import content from another file and have it translated. There must be a way, I couldn't come up with a solution and help would be appreciated.
I struggled with the same problem by myself. As far as I know, there's no way to translate a content of a variable in react-intl.
If you're interested in alternative solutions, I wrote jsLingui i18n library and recently just added support for noop translations, which is exactly what you're looking for.
How can you get the value of a <textarea> and store it in a MySQL database table?
I'm using TinyMCE 3.3.9.3.
Seeing as no one has answered your question I thought I'd chip in. Have you ever managed to get any form data passed into a database before (I.E is it just accessing a textarea that's the problem), or is this a general question about how to put form data into databases?
One thing I would strongly recommend is moving away from WYSIWYG style editors if your seriously considering doing web development properly. From experience no matter how good they claim to be you'll always encounter cross browser problems and at some point you'll have to dig into the code and understand it.
Sorry this isn't a direct answer, but with a bit more info as to what you need to know I'm sure we can help... I warn you though, if you've not had much experience at this some of the answers could be a bit deep. I think maybe this is why you've not had any responses because the answer require could potentially be quite epic,lol.
Dan
The tinymce editor id equals the textarea id.
Assuming that editor is your tinymce editor instance you may use the following to get the textareaa content (which is then equal to the editor content).
editor.triggerSave(); // update the textarea
var textarea_element = document.getElementById(editor.id); // get the updated textarea
var content = textarea_element.innerHTML; // this is the content
// now you need to call a script to save the content (i suggest you use ajax)
...