I'm using the <Card> component from Semantic-UI-React. I have a group of cards displaying some random information. I have the extra prop defined which renders a button. My idea is to have this button, when clicked, toggle/expand a div to display more information. I have looked around and not been able to find much on how to achieve this.
I looked into <Accordion> from semantic ui as well, but have not been able to get it to play nicely nested inside the card component.
I created a sandbox to show what I have so far and the general look of what I explained above.
For brevity I will only post the code of one card out of the group below.
<Card color="blue">
<Card.Content header="Elliot" textAlign="center" />
<Card.Content description="'Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'" />
<Card.Content extra>
<Button basic circular icon size="tiny">
<Icon name="plus circle" />
</Button>
Show More
</Card.Content>
</Card>
I agree with #brandon-r that you can handle the extra content being show by handling a state object (in my case an array). What I did differently from his example was to take advantage of the <Card.Content extra> component, which handles all the styles issues.
To handle opening and closing the extra content, I used a simple reducer. I like to use the useReducer hook on those UI interactions that need a more complex state handling. Then I created three components: one that shows the extra content when opened, another that shows the button to display the content, and a third one that toggles between the two. I did it this way to be able to generalise it in the future.
Anyways, here is the link to my forked CodeSandbox with my take on the solution:
https://codesandbox.io/embed/semantic-ui-card-extra-content-toggle-kybt2
I hope it helps
Edit #1
Added style={{height: "100%"}} to the card so they mantain their size when one of the cards is opened.
Edit #2
Add picture showing a card with a long description.
<Card color="blue" style={{ height: "100%" }}>
<Card.Content header="Elliot" textAlign="center" />
<Card.Content description="'Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'" />
<ExtraContentAccordion
content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac commodo diam, et tincidunt massa. Sed aliquet tortor purus, in pulvinar enim mattis ac. Maecenas vestibulum cursus lorem, quis fermentum enim lacinia a. Ut nec feugiat nisl. Morbi finibus hendrerit diam, id iaculis nibh feugiat sed. Sed non justo turpis. Fusce neque quam, facilisis eu aliquam vitae, hendrerit nec nulla. Integer metus sapien, dictum eget viverra et, dictum in lectus. Integer vitae dolor ut libero dictum tristique eget non nunc. Suspendisse diam urna, pretium sed elementum sed, fermentum eu leo. Donec augue tortor, rhoncus id pulvinar ac, fringilla eu est. Duis et ante tristique dui molestie maximus at ut enim. Curabitur facilisis tempor lorem quis scelerisque. Maecenas enim leo, mollis at egestas in, vulputate eget risus."
onToggle={toggleCard(1)}
open={state[1]}
/>
</Card>
If you want to expand to show more content, you can keep track of which cards are expanded with some react state. In the UI, you can use the state to determine if you should render the extra content for a particular card.
EX:
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Card, Button, Icon } from "semantic-ui-react";
import "./styles.css";
function App() {
const [expanded, setExpanded] = useState({});
const cards = [1, 2, 3, 4, 5, 6];
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<Card.Group itemsPerRow={3}>
{cards.map(cardNumber => (
<Card color="blue">
<Card.Content header="Elliot" textAlign="center" />
<Card.Content description="'Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'" />
<Card.Content extra>
<Button
basic
circular
icon
size="tiny"
onClick={() =>
setExpanded({
...expanded,
[cardNumber]: !expanded[cardNumber]
})
}
>
<Icon name="plus circle" />
</Button>
{expanded[cardNumber] && (
<div style={{ height: 200 }}>
Extra content expanded for card {cardNumber}
</div>
)}
Show More
</Card.Content>
</Card>
))}
</Card.Group>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Here is a short sandbox to see what it looks like: https://codesandbox.io/s/modest-mayer-t12ot
Related
I am writing a "Terms of Service" page using ReactJS and my idea is to copy the contents of the file tos-text.txt in the component at build time, to avoid fetching time when the page is opened.
I tried as follows, but with poor results:
<h2>Terms of Service</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in scelerisque odio, sed
consequat ante. Donec lectus tortor, ullamcorper quis risus nec, cursus hendrerit libero. In hac
habitasse platea dictumst. Quisque et posuere urna. Suspendisse convallis faucibus nulla, non
egestas libero aliquet non. Donec tincidunt purus sed sem suscipit feugiat. Pellentesque rutrum
blandit gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Pellentesque erat urna, lobortis sed turpis a, aliquet aliquet lorem. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla quis
nibh et mi ullamcorper mattis eu eget lectus.
</p>
import { Container } from 'react-bootstrap'
// Page content
import TosText from 'config/tos-text.txt'
// --- Terms of Service ---
const Tos = () => {
return (
<Container className="flex-grow-1 tos">
<div dangerouslySetInnerHTML={{ __html: TosText }} />
</Container>
)
}
export default Tos
Currently the page only shows the link to the generated txt file (/static/media/tos-text.dc220bee.txt).
EDIT:
As #jsejcksn suggested (source-assets), I've tried to install react-app-rewired, using this config-overrides.js:
module.exports = function override(config, _env) {
let rules = config.module.rules[1].oneOf
rules.splice(rules.length - 1, 0, {
test: /\.txt/,
type: 'asset/source',
})
return config
}
But when I try to start the test server, it says:
$ react-app-rewired start
Failed to compile.
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.module.rules[1].oneOf[8].type should be one of these:
"javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
-> Module type to use for the module
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Thanks to the suggestion given to me by #jsejcksn I succeeded in my intent.
I will add the solution for anyone who needs it:
1. Install dependencies
$ yarn add react-app-rewired raw-loader
2. Create config ovverride
config-overrides.js:
module.exports = function override(config, _env) {
let rules = config.module.rules[1].oneOf
rules.splice(rules.length - 1, 0, {
test: /\.txt$/i,
use: 'raw-loader',
})
return config
}
3. Include the txt into the component
// Page text
import PageText from 'content/page.txt'
const Component = () => {
return (
<div className="text">
<div dangerouslySetInnerHTML={{ __html: PageText }} />
</div>
)
}
export default Component
(P.S. I bet there's a loader that converts the file to a ReactComponent like for SVG files, but I didn't go any further than that)
You can simply use "embedding" to display your static file within a React component.
Using <embed>:
const Tos = () => {
return (
<Container className="flex-grow-1 tos">
<h2>Terms of Service</h2>
<embed type="text/html" src={TosText} />
</Container>
)
}
Note that with this approach you can't use any markup in your imported text file -- it will not render as markup, but simply as text, that's why the title is outside the <embed> in the example above.
This should render something like:
The content will be scrollable if it doesn't fit in the default <embed> box -- but you can control its size with styles or width and height attributes.
Using <iframe>:
Move your static document to the public folder of your app, and change the extension to .html, and then link to it simply:
const Tos = () => {
return (
<Container className="flex-grow-1 tos">
<iframe title="Terms of Service" src="./tos-text.html" />
</Container>
)
}
And this should look like this:
Again, this is just default look, you can change it with styling.
You can also use <embed> with the second approach (file in the public folder):
<embed type="text/html" src="./tos-text.html" />
You can see a live example on codesandbox.
I am newbie in react native animations. I am using react native animated to move menu right and push all content to right without cutting text, but as you see it is not wrapping.
I have already tried these solutions:
Using flexShrink for the Text component
flex: 1 and flexWrap to the parent View element
but nothing has worked, could somebody give me some advice?
`<Animated.View style={boxValue.getLayout()}>
<Text style={{flexWrap: 'wrap'}}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
dapibus massa eu quam porttitor, id suscipit felis volutpat. Duis
tempus turpis
</Text>
</Animated.View>`
What you are trying to do is entirely possible using the Animated API. You can wrap the text component in a Animated.View that is shifted to right using an Animated.Value combined with styling the text with flexWrap: 'wrap'. That seems to be what you were going for, but perhaps you are not updating the width of the text container? Here is a snack showing the general idea in action.
I know this question has been asked a lot, but I don't really understand the answer mainly because all the answer use "Class" and I was taught to use function. I don't even understand the difference but every time I try using a class component, nothing works.
I am really new to React.js and I have a hard time understanding how it works.
I need to show and hide - <p className='service_explication more'>{props.more}</p> - on the click of a button with a smooth animation.
I've tried with basic javascript but it doesn't work.
I've tried a lot of things and now I am stuck and I don't find a good explanation to what I need.
Could you please help me ? I really want to learn but I'm having a hard time.
Thank you so much for your help.
import React, { useState } from 'react';
import '../assets/Section.scss';
import '../assets/Services.scss';
function Services(){
function showMore(event){
}
const BlocService = (props) => {
return <div className='service_sub_container'>
<h1 className='service_name'>{props.name}</h1>
<p className='service_explication'>{props.explication}</p>
<p className='service_explication more'>{props.more}</p>
<button onClik={showMore}>Plus</button>
</div>
}
return (
<>
<div className='main_container'>
<div className='section_container'>
<div className='title_intro_container'>
<h1 className='section_title'>Nos Services</h1>
<p className='section_intro'>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.</p>
</div>
<div className='service_container'>
<BlocService name={'Développeur Front/Web'} explication={'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.'} />
<BlocService name={'Lead developper'} explication={'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.'} />
<BlocService name={'Architectes Front-end'} explication={'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.'} />
<BlocService name={'Développeur Front/Web'} explication={'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.'} />
</div>
</div>
</div>
</>
);
}
export default Services;```
First of all, don't feel bad for ask, everyone has to learn from the bottom.
Reactjs works making "renders" of the webpage in a dynamic way, so you have 2 options depending if you want a smooth animation or just a default show/hide.
If you want to show in a easy way, you can just make a condition which allows to create or not the desired div
function Component() {
const [showed, setShowed] = useState(false)
return (
<div>
<button onClick={()=>setShowed(!showed)}>Show/Hide</button>
{showed && <div>HELLO</div>}
</div>
)
}
If you want to create smooth animations you might want to need classes. With React you can just add or remove classes with no problem and let css do the job, so you can make
function Component() {
const [showed, setShowed] = useState(false)
return (
<div>
<button onClick={()=>setShowed(!showed)}>Show/Hide</button>
<div className={showed?classShowed:classHided>HELLO</div>
</div>
)
}
I hope this helps you
Everything can be done inside the BlocService component. Using a state and conditional rendering:
import React, {useState} from 'react'
const BlocService = (props) => {
const [more, setMore] = useState(false);
const showMore = () => {
setMore(!more);
}
return (
<div className='service_sub_container'>
<h1 className='service_name'>{props.name}</h1>
<p className='service_explication'>{props.explication}</p>
{more && <p className='service_explication more'>{props.more}</p>}
<button onClick={showMore}>Plus</button>
</div>
)
}
export default BlocService;
You also have to remove showMore from Services
In a functional component you would control state by the useState hook provided by react.
import React, {useState} from 'react'
function() services {
const [show, toggleText] = useState(false)
return (
<div>
<h2>Header text</h2>
<button onClick={toggleText(!show)}>Toggle text button</button>
{show && (<p>Text to toggle</p>)}
</div>
)
}
React Documentation
In reactstrap, I saw some single word attributes, like active, flush.
How to make them a variable to dynamic bind with dom?
<ListGroup>
<ListGroupItem active>
<ListGroupItemHeading>List group item heading</ListGroupItemHeading>
<ListGroupItemText>
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
</ListGroupItemText>
</ListGroupItem>
</ListGroup>
The single word attributes in JSX actually represent:
<ListGroupItem active={true}></ListGroupItem>
The true value is implicit when represented with just the keyword.
To convert that to a variable:
<ListGroupItem active={this.state.active}>
<ListGroupItemHeading>List group item heading</ListGroupItemHeading>
<ListGroupItemText>
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
</ListGroupItemText>
</ListGroupItem>
Now, the change to state.active will also reflect the attribute value for active
I am working with a json feed about cars. Part of the text has [VIN:'vin_number_is_here']Car make model here[/VIN]. I am using this in an ng-repeat and would like to, unless there's a better way, use a filter to process the text and create a hyperlink to a custom function ending up with something like <a ng-click="modalViewCar('vin_number_is_here')">Car make model here</a>
I have the replacement of the [/VIN] done but am at a loss for how best to handle the opening "tag".**
Additionally when I have hardcoded a test string I have found that the link never works which I assume is something Angular is responsible for...
app.filter('linkToVIN', ['$sce', function($sce) {
return function(input) {
input = input.replace("[/VIN]","</a>");
**input = input.replace("[VIN='12345abcdef']","<a ng-click=\"modalViewCar('12345abcdef')\">");**
return $sce.trustAsHtml(input);
};
}]);
<div ng-repeat="car in cars">
<div class="col-sm-12" ng-bind-html="car.details | filter:search | linkToVIN"></div>
</div>
The VIN link is in the body of text. Sometimes multiple times. So each ng-repeat has a {{car.details}} which may, about 1 in 3 times, have at least one string with the [VIN] structure. What I'd really like to do is hot link those as they appear within the text as so far I have found a few outlier cases where there are references to other [VIN] numbers. E.g.
Lorem ipsum dolor sit amet, [VIN:'12345abcdef']consectetur[/VIN] adipiscing elit. Vivamus laoreet odio nisi, eget gravida nunc porta gravida. Pellentesque nec porta tortor. In neque mi,[VIN:'000hijk']pretium[/VIN] at mattis ut, consectetur eget felis. Etiam tortor lacus, varius quis augue sed, condimentum varius massa.
Which I would like to convert to.
Lorem ipsum dolor sit amet, < a ng-click="modalViewCar('12345abcdef')" >consectetur< /a > adipiscing elit. Vivamus laoreet odio nisi, eget gravida nunc porta gravida. Pellentesque nec porta tortor. In neque mi,< a ng-click="modalViewCar('000hijk')" >pretium< /a > at mattis ut, consectetur eget felis. Etiam tortor lacus, varius quis augue sed, condimentum varius massa.
solving the regexp
You can do this with one regexp using multiple matching groups to build your anchor tags:
data.replace(/\[VIN:'([\w\d-_]*)'\](.*?)\[\/VIN\]/gmi, '<a ng-click="vc.modalClick($1)">$2</a>')
test - https://regex101.com/r/tU5sG2/2
compiling the DOM
The next issue is that you need to compile the DOM correctly. In order to do that, I recommend a directive
.directive('vinContainer', function($parse, $compile){
restrict: 'A',
link: function($scope, elem, attrs){
regex = /\[VIN:'([\w\d-_]*)'\](.*?)\[\/VIN\]/gmi
anchor = '$2'
data = $parse(attrs.ngModel)($scope)
parsed = data.replace(regex, anchor)
elem.html(parsed).show()
$compile(elem.contents())($scope)
}
}
usage
<div vin-container ng-model="vc.viewData"/>
codepen - http://codepen.io/jusopi/pen/VeebEO?editors=101
This solution assumes that you are tightly coupling your directive to your view controller because your compiled anchors know which method to call. You could further break this down by:
creating an isolate scope with a callback expression you declare on the DOM
have the compiled links call the callback expression passing back the id as the payload
Doing it that way would be much more scalable. Here is the codepen for that version as well - http://codepen.io/jusopi/pen/yeeXJj?editors=101
Say your cars array looks something like this
var cars = [{details: "[VIN='12345abcdef']something[/VIN]"}, {details: ...}, ...];
You can transform it to a usable object by mapping the array
$scope.cars = cars.map(function(car) {
var parts = car.details.match(/^\[VIN='(.+?)'\](.+?)\[\/VIN\]$/);
return {
vin: parts[1],
details: parts[2]
};
});
and then in your template
<div ng-repeat="car in cars">
<a ng-click="modalViewCar(car.vin)" ng-bind-html="car.details"></a>
</div>
This makes the assumption that all your car.details entries match the regular expression.