is it possible to use react-custom-scrollbars with react-autosuggest together?
I wrote this in for auto-suggest but it doesn't work correctly:
renderSuggestionsContainer({ containerProps, children, query }) {
const callRef = scrollbars => {
if (scrollbars !== null) {
ref(scrollbars);
}
}
return (
<Scrollbars
autoHeight
autoHeightMax={240}
id={this.props.id}
ref={callRef}
renderTrackVertical={() => <div className="scrollbars-wrapper" />}
renderThumbVertical={() => <div className="scrollbar-handler" />}>
{children}
</Scrollbars>
);
}
How?
if want to implement react js auto-suggestion box, then you can simply use "react-select", have all feather like scrolling, loader etc.
you will find more detail here https://github.com/JedWatson/react-select
if you want to implement your own with react-native
then instead of scrollbar you should use ListView, because it having more feather-like,
Auto-caching image for ios and android,
Method for onReachBottom which helps to implement infinite scroll. etc
Related
I'm using React and React-Spring to animate a questionnaire app.
I want the questionnaire to animate the leaving/enter of a question when the user answer one.
I'm using React for the app and try to use React-Spring to animate the transitions. The issue is that when the user is answering a question, the question component is updated with the new content before it leaving.
To simplify it, the Question component look like this:
export default function Question({question, onAnswer}) {
const [answer, setAnswer] = useState(null);
return (
<animated.div ...>
{question.title}
<select>...{quesiton.options}...</select>
<button onClick={() => onAnswer(question.id, answer)}>Next</button>
</animated.div>
);
}
I create a Code Sandbox that illustrates my issue:
https://codesandbox.io/s/nostalgic-swartz-lhkj0?file=/src/AnimatedComponent.js
How should I handle this? couldn't find any example on the web
Thanks!
You should use the item property in the transition map instead of using the text directly in the animated.div.
{transitions.map(
({ item, key, props }) =>
item && (
<animated.div key={key} style={props}>
{item}
</animated.div>
)
)}
I am new to React js, Any help will be appreciated.
What I want is to display different Components with different texts on the selection of different options in Dropdown Menu.
I am able to display value using {this.state.value} but this is not what I want.
Here is the link to my existing code.
https://codesandbox.io/s/nifty-noyce-cj466
Others have already pointed out how to dynamically render components if you only have a few, but if you have a lot of them you might want to store them in a dictionary:
const Android = () => (
<span>android</span>
);
const Python = () => (
<span>python</span>
);
const components = {
"android": Android,
"python": Python,
};
const Main = () => {
// choose here based on a key
const Component = components['android'];
return (
<React.Fragment>
<Component/>
</React.Fragment>
);
};
Hi and welcome to SO =)
If you want to render different component relying on some condition then you can make something like this:
{item === "first" && <Component1 />}
{item === "second" && <Component2 />}
{item === "third" && <Component3 />}
You can find more information about conditional rendering here: https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator
And here is a great article about reconciliation by Dan Abramov: https://overreacted.io/react-as-a-ui-runtime/#reconciliation
One of the simplest ways to display different components based on a variable or state is to use inline conditional rendering. You can try something like:
{this.state.value === "test" ? <Component1 />: <Component2 />}
You can also pass this.state.value as a property to another component which renders other elements (or components) conditionally. You should really go through some of the basic react tutorials if you're new as this is part of them - see examples
Is there a way to implement fullscreen API in the React component functions?
You can refer #chiragrupani/fullscreen-react package. It supports both class components and hooks/function components. Also, it supports allowing multiple elements to enter full screen. It's usage is simple as:
Install: npm i #chiragrupani/fullscreen-react
Add button/icon which triggers full screen. You can also make it to toggle between entering and exiting full screen.
<button onClick={e => this.setState({isFullScreen: true})}>Go Fullscreen</button>
Wrap the element that you want to enter fullscreen with FullScreen Component provided by npm package as shown below:
<FullScreen
isFullScreen={this.state.isFullScreen}
onChange={(isFullScreen) => {
this.setState({ isFullScreen });
}}
>
<div>Fullscreen</div>
</FullScreen>
For hooks, the code is similar:
export default function FSExampleHook() {
let [isFullScreen, setFullScreen] = React.useState(false);
return (
<>
<button onClick={(e) => setFullScreen(true)}>Go Fullscreen</button>
<FullScreen
isFullScreen={isFullScreen}
onChange={(isFull: boolean) => {
setFullScreen(isFull);
}}
>
<div>Fullscreen</div>
</FullScreen>
</>
);
}
PS: I am not author of this library, but I am using it in my production site.
I can recommend you this package react-full-screen
I have ToggleRefinement checkboxes in my project and was trying to style it using ".ais-ToggleRefinement-checkbox {}" but the only thing that seems to be able to change is the font-size to make the checkbox bigger. Color and background-color doesn't do anything. I'd like to change the colors (especially the color when the checkbox is checked) and possibly other styling of the checkbox since I'm using BlueprintJS custom checkboxes in other parts of my website and I'd like the styling to be consistent between them.
Is there any way to achieve this?
To use the BlueprintJS components, you can use a connector. The docs for that are here and a guide for connectors in general here. This would look slightly like this:
import React from "react";
import { Checkbox } from "#blueprintjs/core";
import { connectToggleRefinement } from "react-instantsearch/connectors";
const Toggle = ({ refine, currentRefinement, label }) => (
<Checkbox
checked={currentRefinement}
label={label}
onChange={() => refine(!currentRefinement)}
/>
);
const ToggleRefinement = connectToggleRefinement(Toggle);
const App = () => (
<InstantSearch>
{/* add the rest of the app */}
<ToggleRefinement
attribute="materials"
value="Made with solid pine"
label="Solid Pine"
/>
</InstantSearch>
);
I have built an element which is kind of template. (e.g, thumbnail container with image at the top and something in the footer with dynamic content between them)
the dynamic content can be different types of DOM elements, based on the state.
I did it with adding logic in the render method which "injects" the dynamic part.
Does this make sense (having logic in the render method which returns different react components)?
Is there a better way for templating? (i'm not looking for projects that add this capability, wanted to know if there's a "react way" to do so.
Thanks!
edit: here's the code I was referring to (coffeescript):
internalContent: ->
switch #props.title
when "title1" then SomeReactFactory(props)
when "title2" then SomeOtherReactFactory(props)
render ->
...
DOM.div
className: 'panel'
#internalContent()
the internalContent() method is dynamically adding some React Component based on the prop
This is the React way.. And you should make use of it to target your specific domain.
For example a Button in React could be written like this:
const MyButton = ({ text, type = "normal", color = "blue", onClick }) => {
return (
<button
onClick={onClick}
style={{backgroundColor: color }}
className={"my-button my-button--type" + type}>
{text}
</button>);
};
Or a layout component:
const MyLayout = ({side, nav, main}) => {
return (
<div className="container">
<nav>{nave}</nav>
<aside>{side}</aside>
<div className="main">{main}</div>
</div>
)
}
Now you can composite it for example like this:
class App extends Component {
...
render() {
<MyLayout
nav={<MyNav/>}
side={<MySideBar items={...} />}
main={<MyButton onClick={this.onClick} text="Main Button"}
/>
}
}
Dont try to pack everything in a big Component which will do everything, the trick in React is to make small reusable Components and composite them.
You could also create a bunch of components which you can use across many projects.