I am currently using the react-barcode package. It is currently using the format="CODE128" format, I needed to change it to use the Code 39 Barcode Font. How to I import the font to my react project and use it in the react-barcode component. If its not possible is there any other components I can use to achieve this.
Code:
import React, { Component } from 'react';
import Barcode from 'react-barcode';
class Posts extends Component {
render () {
return (
<div>
<Barcode value="http://github.com/kciter" />
</div>
);
}
}
export default (Posts);
Display of the
code128 barcode
React-barcode doesn't use a barcode font at all.
You can just, following the docs, set format="CODE39".
<Barcode value="123456" format="CODE39" />
I am decently new to react and am now trying to add semantic ui to my website. Every time I try to load the components they show as regular html instead of how semantic ui is supposed to look.
Here is an example of a class I am exporting:
import React, { Component } from "react";
import {Radio} from 'semantic-ui-react';
const RadioExampleToggle = () => <Radio toggle />
class Contact extends Component {
render() {
return (
<div>
<h2>DEMO PAGE</h2>
<p>Just a demo.
</p>
{RadioExampleToggle()}
</div>
);
}
}
export default Contact;
This will show up as a regular radio button which is what I find weird. How do I get it to display the semantic UI versions.
Please try import CSS file from semantic-ui.
import 'semantic-ui-css/semantic.min.css'
Try this:
Put it in your index.js
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = "https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
Doing it this way will also help you when your app offers theme switching functionality.
code sample
What's the idiomatic React way to write a component that nests specific child components? I know how to write a component that simply wraps props.children, like this example from React's own docs:
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
But what if I wanted to create a pair of components that can be used like this:
<TabSet>
<Tab name="Mammals">
content for <b>warm blooded</b> creatures here
</Tab>
<Tab name="Fish">
content for <b>cold blooded</b> creatures here
</Tab>
</TabSet>
Here's my initial implementation of TabSet (using reactstrap), simplified to remove styling, selected-tab management, and other stuff not related to this question.
import React, {Fragment, Component} from 'react';
import { TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
export default class TabSet extends Component {
render(props) {
return (
<Fragment>
<Nav tabs>
{props.children.map((tab,i) =>
<NavItem key={i}>
<NavLink>
{ tab.name }
</NavLink>
</NavItem>
)}
</Nav>
<TabContent>
{props.children.map((tab,i) =>
<TabPane key={i} tabId={i}>
{ tab.children }
</TabPane>
)}
</TabContent>
</Fragment>
);
}
}
Where I'm stuck is how to implement the Tab component. Logically, it's part of the TabSet component-- it should never stand alone. And its implementation should be painfully simple because it doesn't actually do anything-- it's just a container for a name attribute and child elements.
So, here's a few questions:
Should I create a separate JS file for the Tab component, or is it so simple that I should just export it as part of the implementation of the TabSet component? If the latter, how?
In classes that use TabSet, will I need two import statements, or is there a way I can import both TabSet and Tab with one import, kinda like import React, {Fragment} from 'react' works ? If the latter, then how would the export statement look in TabSet.js?
Apologies for what's probably an obvious question-- I'm a newbie to both React and ES6.
If the component is only used in context of another component it is logical to put them both in same module and many libraries do that. The way to achieve this is use multiple export statements without default. You are allowed to use one export default and as many export statements as you need. Like this
export default class TabSet
...
export class Tab
and to import
import TabSet, {Tab} from './Tab'
The general syntax being
import defaultExport, { namedExport1, namedExport2 } from "module"
The syntax might seem a bit confusing here is the reference
Where you are using export default class ... you can actually export your own object here. With that in mind, you are able to something like:
const TabSet = props => (
<Your Tabset markup here>
)
const Tab = props => (
<Your Tab markup here>
)
export {
Tabset,
Tab
}
Doing it like this will allow you to import both components in the one line by doing:
import { Tabset, Tab } from 'wherever'
Now while this is one way to do it, and although you think Tab is quite simple, I still believe they belong in their own files. So just create the two class files for Tabset and Tab, but then make a third file called tabs.js or something. It should contain the link to both, like:
import Tabset from './tabset'
import Tab from './tab'
export {
Tabset,
Tab
}
This way you have designated files for each component, and you can import them as a single import.
Also for bonus, if you use the PropTypes ability of react, you can restrict the children of the Tabset to actually be your Tabs. Here is the overview, but as an example you can do something like:
// untested
static propTypes = {
children: PropTypes.arrayOf(PropTypes.instanceOf(Tab))
}
You will have to import the Tab component into the set component to do this.
Im currently using material-ui for my web app and would like to add themes to it so Im using the MuiThemeProvider it comes with to theme it.
The documentation contains instructions on how to use custom components with themes but it unfortunately lacks instruction on how to use it from within a render function.
For example, in the the code they use is:
import React from 'react';
import muiThemeable from 'material-ui/styles/muiThemeable';
const DeepDownTheTree = (props) => (
<span style={{color: props.muiTheme.palette.textColor}}>
Hello World!
</span>
);
export default muiThemeable()(DeepDownTheTree);
Which is fine, but if you need the render function, this wont do. How would I achieve something similar to this? (This wouldnt work, just an example):
import React from 'react';
import muiThemeable from 'material-ui/styles/muiThemeable';
class MyComponent extends React.Component{
render(){
return muiThemeable()(
<span style={{color: props.muiTheme.palette.textColor}}>
Hello World!
</span>
)
}
}
export default muiThemeable()(DeepDownTheTree);
This is critical for my application as I manipulate bits of my DOM in the render function before returning the final DOM.
The equivalent statefull component to your initial stateless component would be
import React from 'react';
import muiThemeable from 'material-ui/styles/muiThemeable';
class MyComponent extends React.Component{
render(){
return (
<span style={{color: this.props.muiTheme.palette.textColor}}>
Hello World!
</span>
)
}
}
export default muiThemeable()(DeepDownTheTree);
Note that you use the higher order function (that's the muiThemable()) on the entire component, not on just what is returned from the render function.
I'm trying to get familiar with react and web development. And made my first steps.
Right now I'm using react with react-bootstrap & css modules.
In the main.html I had to include the bootstrap.css file.
I would like to replace my searchbar with react-autosuggest
It seems like bootstrap is breaking the style of react-autosuggest. Is it possible to combine both? Or is it a bad practice?
That is my code where I tried to use both searchbars:
import React, {Component} from 'react';
import styles from './App.css';
import Search from "./Search/Search"
import SearchAuto from "./SearchAuto/SearchAuto"
class App extends Component {
render() {
return (
<div>
<div className={styles.App}>
<h1>Title</h1>
<Search onSearch={this.searchForAddress}/>
</div>
<SearchAuto onSearch={this.searchForAddress}/>
</div>
);
}
}
export default App;
Any help would be greatly appreciated!