I am new to react storybook and have created relatively simple stories so far as mentioned below:
import React from 'react';
import { action } from '#storybook/addon-actions';
export default {
title: "Test"
}
export const test = () => <textarea onClick={action('textarea clicked')}>Hong test from me</textarea>;
export const input = () => <input type="text"></input>;
With this knowledge, I want to go ahead and create complex stories i.e. as shown in the image below:
Is there any tutorial which will help me achieve this.
Thanks
I am not sure if I understood your question correctly, but I will try to give you an answer.
What we usually do with storybook stories is to create the story and then import a complex component inside it.
import React from 'react';
import { storiesOf } from '#storybook/react';
import { CustomComponent } from '../src';
storiesOf('CustomComponent', module)
.add('Custom Component story 1', () => (
<CustomComponent />
));
Related
okay, so i'm new to the react world, and i was learning about the react useContext, i followed exactly what a tutorial on youtube did, i'm trying to build a little project, i tried following his steps and then i hit an error while trying to use the state i literally want it to be accessible accross my app components, inside my app i've created various componenents and also various responsibility that combines all the reusuable components and do a specific task with it. i'm now trying to access my context from my GETCLICKEDIMAGES file, below are my steps
StateContext.jsx file
import React, { useState, createContext } from "react";
export const StateContext = createContext();
export const StateProvider=(props)=> {
//all the components in this app will share this state.
const [names, setNames] = useState([{ name: "Zucci Daniel! its working" }]);
return (
<StateContext.Provider value={"helo"}>{props.children}</StateContext.Provider>
);
}
App.js
import React, { Component } from "react";
import BigWrapper from "./justComponents/BigWrapper/BigWrapper";
import NavBar from "./justComponents/NavBar/NavBar";
import MainContainer from "./justComponents/MainContainer/MainContainer";
//below are the various responsibilities component
import SEARCHANDDISPLAY from "./Responsibilities/SEARCHANDDISPLAY/SEARCHANDDISPLAY";
import { GETCLICKEDIMAGES } from "./Responsibilities/GETCLICKEDIMAGES/GETCLICKEDIMAGES";
import { StateContext } from "./StateContext/StateContext";
class App extends Component {
render() {
return (
<StateContext>
<BigWrapper>
<NavBar />
<MainContainer>
<SEARCHANDDISPLAY />
<GETCLICKEDIMAGES />
</MainContainer>
</BigWrapper>
</StateContext>
);
}
}
export default App;
GETCLICKEDIMAGE.jsx
import React,{useContext} from "react";
import ClickedImageHolderDiv from "../../justComponents/ClickedImageHolderDiv/ClickedImageHolderDiv";
import Figure from "../../justComponents/Figure/Figure";
//you wanna use the stateContext right? import the context here as so;
import { StateContext } from "../../StateContext/StateContext";
//this is responsible for getting the clicked images and displaying them in full details
/**
a DIV to hold the FIGURE
*/
export const GETCLICKEDIMAGES=()=> {
const value =useContext(StateContext);
return (
<ClickedImageHolderDiv>
<h2>{value}</h2>
<Figure useThisStyle={{ height: "100%" }} />
</ClickedImageHolderDiv>
);
}
i don't know if i'm missing something, or something's changed, pls help.
Import StateProvider in your app.js instead of stateContext
I need such an editor on react https://cloverhearts.github.io/quilljs-markdown/ , as you can see in it you can put markdown characters directly into the text.
when I do this
import React, { Component } from 'react'
import './App.css'
import ReactQuill from 'react-quill'
import Quill from 'quill'
import QuillMarkdown from 'quilljs-markdown'
const App = () => {
const editor = new Quill('#editor', {
theme: 'snow'
})
new QuillMarkdown(editor)
return (
<div className='app'>
{/*<MyComponent/>*/}
<div id="editor"></div>
</div>
)
}
export default App
I get error TypeError: Cannot read property 'on' of undefined
as I understand I need jQuery for work, but I use react, I found https://www.npmjs.com/package/react-quill this quilljs for react, but I don't know how to combine it with markdown https://www.npmjs.com/package/quilljs-markdown
can anyone help?
I found the solution for this after hours of trying this out.
What you have to do is this:
Create a module for ReactQuill
Register the module.
Pass modules to react quill
Shown Below.
Step 01
const modules = {
markdownOptions: {}
};
Step 02
Quill.register('modules/markdownOptions', QuillMarkdown);
Step 03
<ReactQuill
modules={modules}
/>
It seems like you are trying to initialize the Quill instance and the markdown module before the editor is ready.
Use useEffect hook to initialize it after the div has been rendered:
import {useEffect} from 'react';
...
useEffect(() => {
const editor = new Quill('#editor', {
theme: 'snow'
});
new QuillMarkdown(editor);
});
Is there any way that able to get updated/modified image object using ReactComponent?
Currently, PESDK React version only supports UI customization.
After edit image in PhotoEditor, can I get exported object using ReactComponent so as to integrate it into existing react component?
I couldn't find any solution in PESDK documentation.
If anyone knows the solution, please let me know
Or PESDK is on progressing development yet?
Thanks
Something like this should work:
import React from 'react'
import ReactDOM from 'react-dom'
window.React = React
window.ReactDOM = ReactDOM
import PhotoEditorUI from 'photoeditorsdk/desktop-ui'
// import PhotoEditorUI from 'photoeditorsdk/react-ui'
class ApplicationComponent extends React.Component {
// Call this when you want to export the editor image
export () {
this.editor.ui.export()
.then(image => {
// Image code here
})
}
render () {
const { ReactComponent } = PhotoEditorUI
return (<ReactComponent
license='PUT YOUR LICENSE KEY HERE' // e.h. '{"owner":"Imgly Inc.","version":"2.1", ...}'
ref={c => this.editor = c}
assets={{
baseUrl: '/node_modules/photoeditorsdk/assets'
}}
editor={{image: this.props.image }}
style={{
width: 1024,
height: 576
}} />)
}
}
Hi guys i am new to react can anyone help me to write unit test for the below code .. i want to test if link is redirecting properly..
Here is my code ..
import React { Component } from 'react';
import {Link} from 'react-router';
import './App.css';
class Home extends Component {
render() {
return (
<Link to='/college/masters/cs' className="student">
<div className="centered">
<h2 className="Branch">Branch</h2>
</div>
</Link>
);
}
}
My test
import React from 'react';
import { mount, shallow } from 'enzyme';
import {expect} from 'chai';
import 'ignore-styles';
import Home from '../src/Home';
describe('<Home/>', function () {
it('should have a Link', function () {
const wrapper = shallow(<Home/>);
expect(wrapper.find('Link')).to.have.length(1);
});
});
Please help me to write test if link is redirecting properly..
Thank you
Well, try this out. It should work.
You merely need to check whether you are passing the valid to property with a relevant value to the Link component. That's it. You don't need to check whether it takes you to the given url, since it is the functionality of the Link component and they should have tests to verify that. If you need that then what you are writing is not a unit test, it is called an e2e. You may need selenium or so in doing that.
expect(wrapper.find('Link').props().to).to.eql('/college/masters/cs')
I want to use marked in reactjs as described in the reactjs docs.
<div>{marked(mystring)}</div>
I use babel so I import marked like this:
import { marked } from 'marked';
Unfortunately the import statement does not work. marked is not defined.
How do I have to import marked here, so that I can use it?
Here's one way to use marked with React:
Ensure that you've installed marked
Include marked in your project's package.json file:
// package.json
{
dependencies: {
react: "^17.0.0",
marked: "^4.0.0",
},
}
Import marked in your .jsx (or related) file:
import { marked } from "marked";
Use the dangerouslySetInnerHTML approach as shown in the example below:
import React from "react";
import { marked } from "marked";
class MarkdownExample extends React.Component {
getMarkdownText() {
var rawMarkup = marked.parse("This is _Markdown_.");
return { __html: rawMarkup };
}
render() {
return <div dangerouslySetInnerHTML={this.getMarkdownText()} />;
}
}
The dangerouslySetInnerHTML attribute gives you the ability to work with raw (HTML) markup. Make sure to take care when using this attribute, though!
Alternative (Safe)
If you don't want to use dangerouslySetInnerHTML and safely render HTML. Try marked-react, which internally uses marked to render the html elements as react components
npm i marked-react
import Markdown from "marked-react";
const MarkdownComponent = () => {
return <Markdown>{rawmarkdown}</Markdown>;
};
Another alternative is react-markdown
Here is another way of using marked with React Hooks:
Create your MarkedConverter component
import { useState } from 'react'
import marked from 'marked'
export const MarkedConverter = () => {
const [markedVal, setMarkedVal] = useState(
'# Welcome to my React Markdown Previewer!'
)
return <div dangerouslySetInnerHTML={createMarkUp(markedVal)}></div>
}
Create Markup function and pass the value from MarkedConverter Component
export const createMarkUp = (val) => {
return { __html: marked(val) }
}
Finally you can import MarkedConverter Component to any of your Component
With the marked-wrapper react-marked-markdown:
import { MarkdownPreview } from 'react-marked-markdown'
export default ({ post }) => (
<div>
<h1>{ post.title }</h1>
<MarkdownPreview value={ post.content }/>
</div>
)
If you just want to import marked:
import marked from 'marked';
Then call the function in your component:
marked('# Markdown');
Here's an example on how to use marked with react:
Install marked with NPM : npm i marked
import it in your react app (this example is created with create-react-app), and using it
example of a react component using "marked"
result in the browser :
preview