20210112のReactに関する記事は9件です。

投稿日：2021-01-12T23:35:12+09:00

material-uiを使って展開可能なヘッダー付きサイドメニュー（Drawer）のコンポーネントを作る

目的

material-uiを用いたヘッダー付きサイドメニュー用のコンポーネントの作成をします。

使用するのはmaterial-uiのDrawerです。この記事ではその中の「Persistent drawer」の左側にメニュー展開をするものを使用します。

そのままデモコードを入れるだけでも動作はしますが、実運用をする際にはコンポーネント化が必須かと思うのでその一例としてコンポーネント化の流れを記載します。

前提条件/筆者環境

npmを用いてReactをインストール済みの環境を想定しています。

React: 17.0.1
typescript: 4.1.3
material-ui/core: 4.11.2
material-ui/icons: 4.11.2

reactコンポーネントの表示できる環境の構築はこちらで作成した環境を使用しています。

コンポーネント化の際の構成

サイドメニュー用のコンテンツを下記の３種類に分割して考えます。
使う場面によって変更をしそうな箇所は子コンポーネントとして切り出すことで、他の構成のサイドメニューを作ることになった際にも同一のコードのコピーを防いでDRY(Don't Repeat Your Self)に保つ狙いがあります。

① サイドメニュー内容
② メインコンテンツ
③ その他

コンポーネント化の流れ

まずはデモコードを引いてきて、そのままの表示をさせます。
次に①と②に関連する箇所をコンポーネントの利用元から渡して利用可能な状態にします。その後に①と②をさらにコンポーネントとして切り出していきます。

最後に切り出したコンポーネントをサイドメニュー用のコンポーネントに引数として渡せるようにすることで、サイドメニューや表示内容が違う箇所に対しても共通して使用できるコンポーネントにしていきます

material-uiのインストール

npmを用いてインストールを行います。

npm install @material-ui/core  # 基本機能のインストール
npm install @material-ui/icons # iconのインストール

デモコードの引用

下記の２つのファイルを作成します

呼び出し元のファイル（index.tsx）
デモコードを引用したファイル（persistentDrawer.tsx）

index.tsx

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { PersistentDrawerLeft } from './persistentDrawer' // デモコードのimport

ReactDOM.render(
  <PersistentDrawerLeft/>, // デモコードをrender
  document.getElementById('app')
);

persistentDrawer.tsx（デモコードそのままのため折り畳み）

:persistentDrawer.tsx
import React from 'react';
import clsx from 'clsx';
import { makeStyles, useTheme, Theme, createStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import CssBaseline from '@material-ui/core/CssBaseline';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';

const drawerWidth = 240;

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      display: 'flex',
    },
    appBar: {
      transition: theme.transitions.create(['margin', 'width'], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
      }),
    },
    appBarShift: {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: drawerWidth,
      transition: theme.transitions.create(['margin', 'width'], {
        easing: theme.transitions.easing.easeOut,
        duration: theme.transitions.duration.enteringScreen,
      }),
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    hide: {
      display: 'none',
    },
    drawer: {
      width: drawerWidth,
      flexShrink: 0,
    },
    drawerPaper: {
      width: drawerWidth,
    },
    drawerHeader: {
      display: 'flex',
      alignItems: 'center',
      padding: theme.spacing(0, 1),
      // necessary for content to be below app bar
      ...theme.mixins.toolbar,
      justifyContent: 'flex-end',
    },
    content: {
      flexGrow: 1,
      padding: theme.spacing(3),
      transition: theme.transitions.create('margin', {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
      }),
      marginLeft: -drawerWidth,
    },
    contentShift: {
      transition: theme.transitions.create('margin', {
        easing: theme.transitions.easing.easeOut,
        duration: theme.transitions.duration.enteringScreen,
      }),
      marginLeft: 0,
    },
  }),
);

export function PersistentDrawerLeft() {
  const classes = useStyles();
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);

  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar
        position="fixed"
        className={clsx(classes.appBar, {
          [classes.appBarShift]: open,
        })}
      >
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={handleDrawerOpen}
            edge="start"
            className={clsx(classes.menuButton, open && classes.hide)}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap>
            Persistent drawer
          </Typography>
        </Toolbar>
      </AppBar>
      <Drawer
        className={classes.drawer}
        variant="persistent"
        anchor="left"
        open={open}
        classes={{
          paper: classes.drawerPaper,
        }}
      >
        <div className={classes.drawerHeader}>
          <IconButton onClick={handleDrawerClose}>
            {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
          </IconButton>
        </div>
        <Divider />
        <List>
          {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
        <Divider />
        <List>
          {['All mail', 'Trash', 'Spam'].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
      </Drawer>
      <main
        className={clsx(classes.content, {
          [classes.contentShift]: open,
        })}
        onClick={handleDrawerClose}
      >
        <div className={classes.drawerHeader} />
        <Typography paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
          facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
          gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
          donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
          adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
          Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
          imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
          arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
          donec massa sapien faucibus et molestie ac.
        </Typography>
        <Typography paragraph>
          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
          facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
          tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
          consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
          vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
          hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
          tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
          nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
          accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
        </Typography>
      </main>
    </div>
  );
}

サイドメニューの内容をコンポーネント化

persistentDrawer.tsxからサイドメニュー部分を切り出したsidemenu.tsxを作成します。

persistentDrawer.tsx

// 不要になったimportを削除
- import List from '@material-ui/core/List';
- import ListItem from '@material-ui/core/ListItem';
- import ListItemIcon from '@material-ui/core/ListItemIcon';
- import ListItemText from '@material-ui/core/ListItemText';
- import InboxIcon from '@material-ui/icons/MoveToInbox';
- import MailIcon from '@material-ui/icons/Mail';
// 作成するコンポーネントのimport
+ import { Sidemenu } from './sidemenu';

// 下記のList内を削除してコンポーネントの呼び出しに変更
- <List>
-   {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
-     <ListItem button key={text}>
-       <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
-       <ListItemText primary={text} />
-     </ListItem>
-   ))}
- </List>
- <Divider />
- <List>
-   {['All mail', 'Trash', 'Spam'].map((text, index) => (
-     <ListItem button key={text}>
-       <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
-       <ListItemText primary={text} />
-     </ListItem>
-   ))}
- </List>
+ <Sidemenu/>

sidemenu.tsx

// 関連するコンポーネントのみimportのコードをデモコードからコピーしてくる
import React from 'react';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';

// function名をSidemenuとする
export function Sidemenu() {
  return (
    // 複数のエレメントを返すのでReact.Flagment（<></>）で囲む
    <>
      {/* 下記はデモコードのリスト部分 */}
      <List>
        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
          <ListItem button key={text}>
            <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
      <Divider />
      <List>
        {['All mail', 'Trash', 'Spam'].map((text, index) => (
          <ListItem button key={text}>
            <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
    </>
  );
}

メインコンテンツをコンポーネント化

サイドメニューと同様にpersistentDrawer.tsxからpersistentDrawerMainContent.tsxを切り出します。

persistentDrawer.tsx

// 作成するコンポーネントをimport
+ import { PersistentDrawerMainContent } from './persistentDrawerMainContent'

// メインコンテンツ部分を削除して作成したコンポーネントを呼び出し
- <Typography paragraph>
-   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-   ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
-   facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
-   gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
-   donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
-   adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
-   Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
-   imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
-   arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
-   donec massa sapien faucibus et molestie ac.
- </Typography>
- <Typography paragraph>
-   Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
-   facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
-   tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
-   consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
-   vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
-   hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
-   tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
-   nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
-   accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
- </Typography>
+ <PersistentDrawerMainContent/>

persistentDrawerMainContent.tsx

import React from 'react';
import Typography from '@material-ui/core/Typography';

export function PersistentDrawerMainContent() {
  return (
    <>
      <Typography paragraph>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
        facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
        gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
        donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
        adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
        Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
        imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
        arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
        donec massa sapien faucibus et molestie ac.
      </Typography>
      <Typography paragraph>
        Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
        facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
        tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
        consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
        vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
        hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
        tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
        nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
        accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
      </Typography>
    </>
  );
}

サイドメニューの内容とメインコンテンツをサイドメニューコンポーネントに引数として渡せるように変更

まずはpersistentDrawer.tsxに引数用の型定義とこれまで作成していたサイドメニュー内容とメインコンテンツのコンポーネントの呼び出しを引数の利用に変更します

persistentDrawer.tsx

// コンポーネントの引数を削除
- import { Sidemenu } from './sidemenu';
- import { PersistentDrawerMainContent } from './persistentDrawerMainContent'

// 型定義の追加（コンポーネントのrenderをしているfunctionの上あたりにあると見やすい）
+ interface Props {
+   sidemenu: React.ReactNode
+   mainContent: React.ReactNode
+ }

// コンポーネントの引数に設定
- export function PersistentDrawerLeft() {
+ export function PersistentDrawerLeft(props: Props) {

// サイドメニューの内容のコンポーネントを引数の利用に変更
- <Sidemenu/>
+ {props.sidemenu}

// メインコンテンツ用のコンポーネントを引数の利用に変更
- <PersistentDrawerMainContent/>
+ {props.mainContent}

次に呼び出し元の呼び出し時に引数を渡すように変更します。

index.tsx

// 作成してたサイドメニューの内容とメインコンテンツのコンポーネントをimport
+ import { Sidemenu } from './sidemenu';
+ import { PersistentDrawerMainContent } from './persistentDrawerMainContent'

// persistentDrawer.tsxに引数を渡すように変更
- <PersistentDrawerLeft/>
+ <PersistentDrawerLeft
+   sidemenu={<Sidemenu/>}
+   mainContent={<PersistentDrawerMainContent/>}
+ />,

終わりに

以上でコンポーネント化は終わりです。
これで管理画面とユーザー画面などで同様のレイアウトは使いたいが表示するサイドメニューやコンテンツが違う場合でも作成した展開可能なヘッダー付きサイドメニューのコンポーネントを共通で使うことができるようになりました。

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-12T18:28:43+09:00

【ReactNative】スプラッシュ画像の設定(自分メモ)

react-native-splash-screenを使う
参考

導入
yarn add react-native-splash-screen
cd ios
pod install
or
npx pod-install ios
ios

スプラッシュ画面のファイルは
ios/[プロジェクト名]/LaunchScreen.storyboard
subviews、constraintsの削除をしておく

ios/[ProjectName]/AppDelegate.m
...
#import "RNSplashScreen.h" // add

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    ...
    [RNSplashScreen show]; // add
    return YES;
}

@end
Android

./android/app/src/main/java/com/apng/MainApplication.java:
プロジェクト名/android/app/src/main/java/com/プロジェクト名/MainActivity.java　を以下の様に修正
import android.os.Bundle; //追加
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; //追加


public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected void onCreate(Bundle savedInstanceState) { //追加
    SplashScreen.show(this); //追加
    super.onCreate(savedInstanceState); //追加
  } //追加
色設定用
cd プロジェクト/
touch ./android/app/src/main/res/values/colors.xml
cd ./android/app/src/main/res/
mkdir layout drawable-xhdpi drawable-xxhdpi drawable-xxxhdpi
colors.xmlが出来たので以下の設定
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="splashscreen_bg">#283c55</color>
    <color name="app_bg">#283c55</color>
</resources>
launch_screen.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/launch_screen">
</LinearLayout>
drawableはそれぞれのディレクトリにlaunch_screen.pngを入れる。

種別解像度(w*h)
ldpi 200 x 320
mdpi 360 x 640
hdpi 480 x 800
xhdpi 720 x 1280
xxhdpi 1080 x 1920
xxxhdpi 1440 x 2560

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-12T16:19:19+09:00

【react-modal-hook】モーダルコンポーネントに便利なhooksを解説【on Next.js】

前書き

Next.jsの上でモーダルコンポーネントを実装する手順を解説していこうと思います。ご指摘等ありましたら、コメントしていただけますとありがたいです?‍♂️

【Next.js】環境構築とパッケージを取り込む方法

【react-modal】モーダルコンポーネントを実装【on Next.js】

以下、本題です。

react-modal-hook

react-modal-hookはUIを提供しません。代わりに他の場所で定義されたモーダルコンポーネントをレンダリングする便利な方法を提供してくれます。モーダルのUIを提供してくれるReactのライブラリであるreact-modalと一緒に使うと良いかもしれませんね。公式でも「相性が良い」と書かれていますしね。

For a simple modal component check out react-modal, which works well with this library.

この記事でもreact-modalを使って解説していきます。

react-modalは別の記事で解説しています。

Github

以降から具体的な使い方を解説していきます！

シンプルなモーダルコンポーネントを実装してみる

最初に全体的なコードを示しておきます。以降から順番に解説していこうと思います。
src/pages/react-modal-hook.tsx
import ReactModal from "react-modal"
import { useModal, ModalProvider } from "react-modal-hook"

// アプリのルートを識別するクエリセレクタを指定する。
ReactModal.setAppElement('#__next')

const App = () => {
  const [showModal, hideModal] = useModal(() => (
    <>
      <ReactModal isOpen>
        <p>Modal content</p>
        <button onClick={hideModal}>Hide modal</button>
      </ReactModal>
    </>
  ))

  return <button onClick={showModal}>Show modal</button>
}

const Hoge = () => {
  return(
    <ModalProvider>
      <App/>
    </ModalProvider>
  )
}

export default Hoge
説明のために、むりやり1ファイルにまとめていますが、実際は別ファイルにまとめておくと良いかもしれません。

【1】必要なコンポーネントをimportする
import ReactModal from "react-modal"
import { useModal, ModalProvider } from "react-modal-hook"
react-modal：モーダルのUIを提供してくれるライブラリ

useModal：今回の主役。

ModalProvider：プロバイダー。モーダル用のcontextを提供してくれる。

【2】useModalの引数にコールバック関数としてモーダルを定義

今回は、モーダルのUIとしてreact-modalを使うので、useModal関数の引数の中のコールバック関数としてreact-modalを定義してください。

（コードは【3】とまとめて示します。）

【3】useModalの返り値を配列の形で受け取る
const App = () => {
  const [showModal, hideModal] = useModal(() => (
    <>
      <ReactModal isOpen>
        <p>Modal content</p>
        <button onClick={hideModal}>Hide modal</button>
      </ReactModal>
    </>
  ));

  return <button onClick={showModal}>Show modal</button>;
}
showModal：モーダルを表示する関数

hideModal：モーダルを閉じる関数

上記のようにuseModalの返り値がモーダルの表示/非表示の関数が自動的に返ってきます。便利！

蛇足ですが、<ReactModal isOpen>のisOpenがtrueになる時にモーダルが表示されます。（これはreact-modalの機能です。）

【4】ModalProviderでラップする
const Hoge = () => {
  return(
    <ModalProvider>
      <App/>
    </ModalProvider>
  )
}
上記のようにuseModalを使っている関数コンポーネントをModalProviderでラップしてあげてださい。

基本的な形は以上です！

モーダル内部の更新

モーダル内部で何らかの値を更新する場合は、useModal関数の第二引数に配列の形で参照する値を渡してください。（コードは公式のコピペ）
const App = () => {
  const [count, setCount] = useState(0);
  const [showModal] = useModal(
    () => (
      <ReactModal isOpen>
        <span>The count is {count}</span>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </ReactModal>
    ),
    [count]
  );

  return <button onClick={showModal}>Show modal</button>;
}
第二引数に配列の形で渡した値の変化をみて、レンダリングされるのだと思います。（多分。useEffectと同じニュアンスなのだと思う。）

参考記事：【React hooks】噛み砕いて解説してみた~useEffect編~

以上です！個人的にはreact-modalでUIを整えて、react-modal-hookで表示/非表示の関数をコンポーネント化させておくと爆速でモーダル実装できるのかなあ〜なんて思ったりします！

ではでは〜?

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-12T16:19:19+09:00

【Next.js】モーダルコンポーネントの実装を解説【hooks編】

前書き

Next.jsの上でモーダルコンポーネントを実装する手順を解説していこうと思います。ご指摘等ありましたら、コメントしていただけますとありがたいです?‍♂️

【Next.js】環境構築とパッケージを取り込む方法

【Next.js】モーダルコンポーネントの実装を解説【UI編】

【Next.js】モーダルコンポーネントの実装を解説【hooks編】　←今ココ

以下、本題です。

react-modal-hook

react-modal-hookはUIを提供しません。代わりに他の場所で定義されたモーダルコンポーネントをレンダリングする便利な方法を提供してくれます。モーダルのUIを提供してくれるReactのライブラリであるreact-modalと一緒に使うと良いかもしれませんね。公式でも「相性が良い」と書かれていますしね。

For a simple modal component check out react-modal, which works well with this library.

この記事でもreact-modalを使って解説していきます。

react-modalは別の記事で解説しています。

Github

以降から具体的な使い方を解説していきます！

シンプルなモーダルコンポーネントを実装してみる

最初に全体的なコードを示しておきます。以降から順番に解説していこうと思います。
src/pages/react-modal-hook.tsx
import ReactModal from "react-modal"
import { useModal, ModalProvider } from "react-modal-hook"

// アプリのルートを識別するクエリセレクタを指定する。
ReactModal.setAppElement('#__next')

const App = () => {
  const [showModal, hideModal] = useModal(() => (
    <>
      <ReactModal isOpen>
        <p>Modal content</p>
        <button onClick={hideModal}>Hide modal</button>
      </ReactModal>
    </>
  ))

  return <button onClick={showModal}>Show modal</button>
}

const Hoge = () => {
  return(
    <ModalProvider>
      <App/>
    </ModalProvider>
  )
}

export default Hoge
説明のために、むりやり1ファイルにまとめていますが、実際は別ファイルにまとめておくと良いかもしれません。

【1】必要なコンポーネントをimportする
import ReactModal from "react-modal"
import { useModal, ModalProvider } from "react-modal-hook"
react-modal：モーダルのUIを提供してくれるライブラリ

useModal：今回の主役。

ModalProvider：プロバイダー。モーダル用のcontextを提供してくれる。

【2】useModalの引数にコールバック関数としてモーダルを定義

今回は、モーダルのUIとしてreact-modalを使うので、useModal関数の引数の中のコールバック関数としてreact-modalを定義してください。

（コードは【3】とまとめて示します。）

【3】useModalの返り値を配列の形で受け取る
const App = () => {
  const [showModal, hideModal] = useModal(() => (
    <>
      <ReactModal isOpen>
        <p>Modal content</p>
        <button onClick={hideModal}>Hide modal</button>
      </ReactModal>
    </>
  ));

  return <button onClick={showModal}>Show modal</button>;
}
showModal：モーダルを表示する関数

hideModal：モーダルを閉じる関数

上記のようにuseModalの返り値がモーダルの表示/非表示の関数が自動的に返ってきます。便利！

蛇足ですが、<ReactModal isOpen>のisOpenがtrueになる時にモーダルが表示されます。（これはreact-modalの機能です。）

【4】ModalProviderでラップする
const Hoge = () => {
  return(
    <ModalProvider>
      <App/>
    </ModalProvider>
  )
}
上記のようにuseModalを使っている関数コンポーネントをModalProviderでラップしてあげてださい。

基本的な形は以上です！

モーダル内部の更新

モーダル内部で何らかの値を更新する場合は、useModal関数の第二引数に配列の形で参照する値を渡してください。（コードは公式のコピペ）
const App = () => {
  const [count, setCount] = useState(0);
  const [showModal] = useModal(
    () => (
      <ReactModal isOpen>
        <span>The count is {count}</span>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </ReactModal>
    ),
    [count]
  );

  return <button onClick={showModal}>Show modal</button>;
}
第二引数に配列の形で渡した値の変化をみて、レンダリングされるのだと思います。（多分。useEffectと同じニュアンスなのだと思う。）

参考記事：【React hooks】噛み砕いて解説してみた~useEffect編~

以上です！個人的にはreact-modalでUIを整えて、react-modal-hookで表示/非表示の関数をコンポーネント化させておくと爆速でモーダル実装できるのかなあ〜なんて思ったりします！

ではでは〜?

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-12T15:55:10+09:00

Snowpack で React・Vuejs・Svelte を動かしてみる

Snowpack とは

webpack や rollup などの代替として利用できるフロントエンドの依存解決を行うビルドツール、モジュールバンドラではなく、コードを ESM 形式に変換してモジュールとして利用できるようにする。

参照：Snowpack公式サイト

ES Modules までの歴史

NodeJS が誕生、CommonJS を基にしたモジュール機能を実装

RequireJS が誕生、AMD をブラウザ用に変換する

Browserify が誕生、CommonJS をブラウザ用に変換する

CommonJS でも AMD でも使える UMD が誕生

Webpack が誕生、やたらと多機能で実質的にデファクト環境となる

ES Modules の策定

つまり現状では CommonJS（CJS）、AMD、UMD、ES Modules（ESM）の４種類のモジュール形式が存在することになります。

ES Modules の誕生

フロントエンドの複雑化・肥大化にともなって ES Modules（ESM）という仕様が策定された、これは 2021年現在では既に Microsoft Edge を含む IE 以外のブラウザでは対応されており、Nodejs でも v12 以降は標準対応している。

参照：MDN - JavaScript モジュール

普及しない ES Modules

じゃあ依存ファイルを ESM でガンガン import すれば良いよね！としたいところだったが、いくつかの問題が存在していた。

webpack 等のバンドラが開発環境として普及してしまっている

npm で提供されているライブラリの多くが ESM に対応していない

import に対応していないブラウザに対する互換性がまるでない

そして Snowpack の登場

ここで前述の問題を解決するための新たな手段として注目されているのが Snowpack というビルドツールで、これは単純にいうと npm ライブラリを ESM 形式に変換して出力するというビルドツールである。

※これはつまり ESM をサポートしている Deno でも npm の資産が使えるようになることも意味しています。

なお現状ではファイルのバンドルだけではなく、JSX や Vue テンプレートファイルの変換とかもしてると思うので、それらの対応についても解説しておきます。

フレームワークへの対応

Snowpack には create-snowpack-app というボイラープレートが存在しており、簡単にいうと React や VueJS などのフレームワークを Snowpack で変換する際の開発環境があらかじめ用意されています。

これにより JSX や Vueファイル、Svelteファイルの変換などが行えます。

create-snowpack-app のテンプレート一覧はこちら

React
Reactの例
npx create-snowpack-app yourappname --template @snowpack/app-template-react
React+TypeScriptの例
npx create-snowpack-app yourappname --template @snowpack/app-template-react-typescript
Vue
Vueの例
npx create-snowpack-app yourappname --template @snowpack/app-template-vue
Vue+TypeScriptの例
npx create-snowpack-app yourappname --template @snowpack/app-template-vue-typescript
Svelte
Svelteの例
npx create-snowpack-app yourappname --template @snowpack/app-template-svelte
Svelte+TypeScriptの例
npx create-snowpack-app yourappname --template @snowpack/app-template-svelte-typescript
WebWorker 対応

2021年1月現在では WebWorker 内での ES Modules は全てのブラウザで対応しているわけではありません、これに関しては、Snowpack v 3.0.0 と Snowpack Webpack v5 plugin の両方で自動的にバンドルファイルを出力するようになりました。

Web Workers - Snowpack

IE対応
npm snowpachk --nomodule
でレガシーブラウザ用に旧来のようにバンドルしたJSファイルを出力できるが、ドキュメントに書いてない気がする。

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-12T13:20:51+09:00

【React-modal】モーダルコンポーネントを実装【on Next.js】

前書き

Next.jsの上でモーダルコンポーネントを実装する手順を解説していこうと思います。ご指摘等ありましたら、コメントしていただけますとありがたいです?‍♂️

【Next.js】環境構築とパッケージを取り込む方法

以下、本題です。

React-modal

React-modalはReactのライブラリの一種です。React-modalを使うことで手軽にモーダルコンポーネントを実装することができます。

Github

ドキュメント

以降から具体的な使い方を解説していきます。

シンプルなモーダルコンポーネントを実装してみる

【1】インストール

npm or yarn でreact-modalをインストールしてください。
npm install react-modal
yarn add react-modal
【2】モーダル用のファイルを追加

pages/modal.tsxを追加してください。（基本的にはこのpages/modal.tsxファイルにコードを追加していきます。）こうすることでhttp://localhost:3000/modalにアクセスすることでモーダルを実装したページを確認することができます。

これはNext.jsのデフォルトの機能です。便利!!

【3】実際にコードを記述していく（全体像）

先に、コードの全体像を示しておきます。
pages/modal.tsx
import Modal from 'react-modal'
import { useState } from 'react'

// スタイリング
const customStyles = {
  overlay: {
    position: "fixed",
    top: 0,
    left: 0,
    backgroundColor: "rgba(0,0,0,0.3)"
  },

  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    width                 : '500px',
    height                : '300px',
    transform             : 'translate(-50%, -50%)'
  }
};

// アプリのルートを識別するクエリセレクタを指定する。
Modal.setAppElement('#__next')

const App = () => {
  const [modalIsOpen,setIsOpen] = useState(false)

  // モーダルを開く処理
  const openModal = () => {
    setIsOpen(true)
  }

  const afterOpenModal = () => {
    // モーダルが開いた後の処理
  }

  // モーダルを閉じる処理
  const closeModal = () => {
    setIsOpen(false)
  }

    return (
      <>
        <button onClick={openModal}>Open Modal</button>
        <Modal
          // isOpenがtrueならモダールが起動する
          isOpen={modalIsOpen}
          // モーダルが開いた後の処理を定義
          onAfterOpen={afterOpenModal}
          // モーダルを閉じる処理を定義
          onRequestClose={closeModal}
          // スタイリングを定義
          style={customStyles}
        >

          <h2>Hello</h2>
          <button onClick={closeModal}>close</button>
        </Modal>
      </>
    )
}

export default App
実際に描画される画面は下記です。

以降から順番に解説していきます。

【4】必要なコンポーネントをimport

react-modalとState管理のためのuseStateを追加しておきます。
import Modal from 'react-modal'
import { useState } from 'react'
useStateの記事はこちらの記事を読むと理解が深まると思います。

【5】Modalのプロパティを解説

import Modal from 'react-modal'でimportしてきたModalコンポーネントの中身（プロパティ）から解説していきます。
return (
  <div>
    <button onClick={openModal}>Open Modal</button>
      <Modal
        // isOpenがtrueならモダールが起動する
        isOpen={modalIsOpen}
        // モーダルが開いた後の処理を定義
        onAfterOpen={afterOpenModal}
        // モーダルを閉じる処理を定義
        onRequestClose={closeModal}
        // スタイリングを定義
        style={customStyles}
      >

        <h2>Hello</h2>
        <button onClick={closeModal}>close</button>
      </Modal>
  </div>
isOpen:モーダルを表示する否かのbooleanを指定

onRequestClose：モーダルを閉じるための関数を指定

onAfterOpen：モーダルを開いた後に実行する関数を指定

style：スタイリングを定義

他にも多くのプロパティがあります。気になる方はドキュメントを読んでみてください。

【6】アプリのルートを識別するクエリセレクタを指定する。

モーダルが開いている時、他のコンテンツを隠すと思います。これを可能にするためにreact-modalでは、アプリのルートを識別するクエリセレクタを指定してModal.setAppElementを呼び出す必要があります。

Next.jsでは#__nextがルートに指定されるので。下記のようにコードを追加します。
Modal.setAppElement('#__next')
【7】スタイリングと関数を定義

スタイリングと、関数（モーダルを開いたりする）をAppコンポーネント内に定義します。

まずはスタイリングから。
const customStyles = {
  overlay: {
    position: "fixed",
    top: 0,
    left: 0,
    backgroundColor: "rgba(0,0,0,0.3)"
  },

  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    width                 : '500px',
    height                : '300px',
    transform             : 'translate(-50%, -50%)'
  }
}
overlayはモーダルが開いている時の背景のスタイリング、contentはモーダル自体のスタイリングを定義しています。

ここで定義した定数customStylesをModalコンポーネント内のstyleプロパティ内に追加してください。
<Modal
  //略
  // スタイリングを定義
  style={customStyles}
>
次に関数コンポーネント内にモーダルを閉じたり、開いたりするする関数を定義していきます。
const App = () => {
  const [modalIsOpen,setIsOpen] = useState(false);

  // モーダルを開く処理
  const openModal = () => {
    setIsOpen(true);
  }

  const afterOpenModal = () => {
    // モーダルが開いた後の処理
  }

  // モーダルを閉じる処理
  const closeModal = () => {
    setIsOpen(false);
  }
これらの関数はModalコンポーネント内のプロパティ内で下記のように使われます。
<Modal
  // isOpenがtrueならモダールが起動する
  isOpen={modalIsOpen}
  // モーダルが開いた後の処理を定義
  onAfterOpen={afterOpenModal}
  // モーダルを閉じる処理を定義
  onRequestClose={closeModal}
  // スタイリングを定義
  style={customStyles}
>
以上です！基本的なところは解説したので、もっと詳しく知りたい方はGithubやドキュメントを読むと理解が深まるかと思います!!

ではでは~！

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-12T13:20:51+09:00

【react-modal】モーダルコンポーネントを実装【on Next.js】

前書き

Next.jsの上でモーダルコンポーネントを実装する手順を解説していこうと思います。ご指摘等ありましたら、コメントしていただけますとありがたいです?‍♂️

【Next.js】環境構築とパッケージを取り込む方法

以下、本題です。

React-modal

React-modalはReactのライブラリの一種です。React-modalを使うことで手軽にモーダルコンポーネントを実装することができます。

Github

ドキュメント

以降から具体的な使い方を解説していきます。

シンプルなモーダルコンポーネントを実装してみる

【1】インストール

npm or yarn でreact-modalをインストールしてください。
npm install react-modal
yarn add react-modal
【2】モーダル用のファイルを追加

pages/modal.tsxを追加してください。（基本的にはこのpages/modal.tsxファイルにコードを追加していきます。）こうすることでhttp://localhost:3000/modalにアクセスすることでモーダルを実装したページを確認することができます。

これはNext.jsのデフォルトの機能です。便利!!

【3】実際にコードを記述していく（全体像）

先に、コードの全体像を示しておきます。
pages/modal.tsx
import Modal from 'react-modal'
import { useState } from 'react'

// スタイリング
const customStyles = {
  overlay: {
    position: "fixed",
    top: 0,
    left: 0,
    backgroundColor: "rgba(0,0,0,0.3)"
  },

  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    width                 : '500px',
    height                : '300px',
    transform             : 'translate(-50%, -50%)'
  }
};

// アプリのルートを識別するクエリセレクタを指定する。
Modal.setAppElement('#__next')

const App = () => {
  const [modalIsOpen,setIsOpen] = useState(false)

  // モーダルを開く処理
  const openModal = () => {
    setIsOpen(true)
  }

  const afterOpenModal = () => {
    // モーダルが開いた後の処理
  }

  // モーダルを閉じる処理
  const closeModal = () => {
    setIsOpen(false)
  }

    return (
      <>
        <button onClick={openModal}>Open Modal</button>
        <Modal
          // isOpenがtrueならモダールが起動する
          isOpen={modalIsOpen}
          // モーダルが開いた後の処理を定義
          onAfterOpen={afterOpenModal}
          // モーダルを閉じる処理を定義
          onRequestClose={closeModal}
          // スタイリングを定義
          style={customStyles}
        >

          <h2>Hello</h2>
          <button onClick={closeModal}>close</button>
        </Modal>
      </>
    )
}

export default App
実際に描画される画面は下記です。

以降から順番に解説していきます。

【4】必要なコンポーネントをimport

react-modalとState管理のためのuseStateを追加しておきます。
import Modal from 'react-modal'
import { useState } from 'react'
useStateの記事はこちらの記事を読むと理解が深まると思います。

【5】Modalのプロパティを解説

import Modal from 'react-modal'でimportしてきたModalコンポーネントの中身（プロパティ）から解説していきます。
return (
  <div>
    <button onClick={openModal}>Open Modal</button>
      <Modal
        // isOpenがtrueならモダールが起動する
        isOpen={modalIsOpen}
        // モーダルが開いた後の処理を定義
        onAfterOpen={afterOpenModal}
        // モーダルを閉じる処理を定義
        onRequestClose={closeModal}
        // スタイリングを定義
        style={customStyles}
      >

        <h2>Hello</h2>
        <button onClick={closeModal}>close</button>
      </Modal>
  </div>
isOpen:モーダルを表示する否かのbooleanを指定

onRequestClose：モーダルを閉じるための関数を指定

onAfterOpen：モーダルを開いた後に実行する関数を指定

style：スタイリングを定義

他にも多くのプロパティがあります。気になる方はドキュメントを読んでみてください。

【6】アプリのルートを識別するクエリセレクタを指定する。

モーダルが開いている時、他のコンテンツを隠すと思います。これを可能にするためにreact-modalでは、アプリのルートを識別するクエリセレクタを指定してModal.setAppElementを呼び出す必要があります。

Next.jsでは#__nextがルートに指定されるので。下記のようにコードを追加します。
Modal.setAppElement('#__next')
【7】スタイリングと関数を定義

スタイリングと、関数（モーダルを開いたりする）をAppコンポーネント内に定義します。

まずはスタイリングから。
const customStyles = {
  overlay: {
    position: "fixed",
    top: 0,
    left: 0,
    backgroundColor: "rgba(0,0,0,0.3)"
  },

  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    width                 : '500px',
    height                : '300px',
    transform             : 'translate(-50%, -50%)'
  }
}
overlayはモーダルが開いている時の背景のスタイリング、contentはモーダル自体のスタイリングを定義しています。

ここで定義した定数customStylesをModalコンポーネント内のstyleプロパティ内に追加してください。
<Modal
  //略
  // スタイリングを定義
  style={customStyles}
>
次に関数コンポーネント内にモーダルを閉じたり、開いたりするする関数を定義していきます。
const App = () => {
  const [modalIsOpen,setIsOpen] = useState(false);

  // モーダルを開く処理
  const openModal = () => {
    setIsOpen(true);
  }

  const afterOpenModal = () => {
    // モーダルが開いた後の処理
  }

  // モーダルを閉じる処理
  const closeModal = () => {
    setIsOpen(false);
  }
これらの関数はModalコンポーネント内のプロパティ内で下記のように使われます。
<Modal
  // isOpenがtrueならモダールが起動する
  isOpen={modalIsOpen}
  // モーダルが開いた後の処理を定義
  onAfterOpen={afterOpenModal}
  // モーダルを閉じる処理を定義
  onRequestClose={closeModal}
  // スタイリングを定義
  style={customStyles}
>
以上です！基本的なところは解説したので、もっと詳しく知りたい方はGithubやドキュメントを読むと理解が深まるかと思います!!

ではでは~！

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-12T13:20:51+09:00

【Next.js】モーダルコンポーネントの実装を解説【UI編】

前書き

Next.jsの上でモーダルコンポーネントを実装する手順を解説していこうと思います。ご指摘等ありましたら、コメントしていただけますとありがたいです?‍♂️

【Next.js】環境構築とパッケージを取り込む方法

【Next.js】モーダルコンポーネントの実装を解説【UI編】　←今ココ

【Next.js】モーダルコンポーネントの実装を解説【hooks編】

以下、本題です。

React-modal

React-modalはReactのライブラリの一種です。React-modalを使うことで手軽にモーダルコンポーネントを実装することができます。

Github

ドキュメント

以降から具体的な使い方を解説していきます。

シンプルなモーダルコンポーネントを実装してみる

【1】インストール

npm or yarn でreact-modalをインストールしてください。
npm install react-modal
yarn add react-modal
【2】モーダル用のファイルを追加

pages/modal.tsxを追加してください。（基本的にはこのpages/modal.tsxファイルにコードを追加していきます。）こうすることでhttp://localhost:3000/modalにアクセスすることでモーダルを実装したページを確認することができます。

これはNext.jsのデフォルトの機能です。便利!!

【3】実際にコードを記述していく（全体像）

先に、コードの全体像を示しておきます。
pages/modal.tsx
import Modal from 'react-modal'
import { useState } from 'react'

// スタイリング
const customStyles = {
  overlay: {
    position: "fixed",
    top: 0,
    left: 0,
    backgroundColor: "rgba(0,0,0,0.3)"
  },

  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    width                 : '500px',
    height                : '300px',
    transform             : 'translate(-50%, -50%)'
  }
};

// アプリのルートを識別するクエリセレクタを指定する。
Modal.setAppElement('#__next')

const App = () => {
  const [modalIsOpen,setIsOpen] = useState(false)

  // モーダルを開く処理
  const openModal = () => {
    setIsOpen(true)
  }

  const afterOpenModal = () => {
    // モーダルが開いた後の処理
  }

  // モーダルを閉じる処理
  const closeModal = () => {
    setIsOpen(false)
  }

    return (
      <>
        <button onClick={openModal}>Open Modal</button>
        <Modal
          // isOpenがtrueならモダールが起動する
          isOpen={modalIsOpen}
          // モーダルが開いた後の処理を定義
          onAfterOpen={afterOpenModal}
          // モーダルを閉じる処理を定義
          onRequestClose={closeModal}
          // スタイリングを定義
          style={customStyles}
        >

          <h2>Hello</h2>
          <button onClick={closeModal}>close</button>
        </Modal>
      </>
    )
}

export default App
実際に描画される画面は下記です。

以降から順番に解説していきます。

【4】必要なコンポーネントをimport

react-modalとState管理のためのuseStateを追加しておきます。
import Modal from 'react-modal'
import { useState } from 'react'
useStateの記事はこちらの記事を読むと理解が深まると思います。

【5】Modalのプロパティを解説

import Modal from 'react-modal'でimportしてきたModalコンポーネントの中身（プロパティ）から解説していきます。
return (
  <div>
    <button onClick={openModal}>Open Modal</button>
      <Modal
        // isOpenがtrueならモダールが起動する
        isOpen={modalIsOpen}
        // モーダルが開いた後の処理を定義
        onAfterOpen={afterOpenModal}
        // モーダルを閉じる処理を定義
        onRequestClose={closeModal}
        // スタイリングを定義
        style={customStyles}
      >

        <h2>Hello</h2>
        <button onClick={closeModal}>close</button>
      </Modal>
  </div>
isOpen:モーダルを表示する否かのbooleanを指定

onRequestClose：モーダルを閉じるための関数を指定

onAfterOpen：モーダルを開いた後に実行する関数を指定

style：スタイリングを定義

他にも多くのプロパティがあります。気になる方はドキュメントを読んでみてください。

【6】アプリのルートを識別するクエリセレクタを指定する。

モーダルが開いている時、他のコンテンツを隠すと思います。これを可能にするためにreact-modalでは、アプリのルートを識別するクエリセレクタを指定してModal.setAppElementを呼び出す必要があります。

Next.jsでは#__nextがルートに指定されるので。下記のようにコードを追加します。
Modal.setAppElement('#__next')
【7】スタイリングと関数を定義

スタイリングと、関数（モーダルを開いたりする）をAppコンポーネント内に定義します。

まずはスタイリングから。
const customStyles = {
  overlay: {
    position: "fixed",
    top: 0,
    left: 0,
    backgroundColor: "rgba(0,0,0,0.3)"
  },

  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    width                 : '500px',
    height                : '300px',
    transform             : 'translate(-50%, -50%)'
  }
}
overlayはモーダルが開いている時の背景のスタイリング、contentはモーダル自体のスタイリングを定義しています。

ここで定義した定数customStylesをModalコンポーネント内のstyleプロパティ内に追加してください。
<Modal
  //略
  // スタイリングを定義
  style={customStyles}
>
次に関数コンポーネント内にモーダルを閉じたり、開いたりするする関数を定義していきます。
const App = () => {
  const [modalIsOpen,setIsOpen] = useState(false);

  // モーダルを開く処理
  const openModal = () => {
    setIsOpen(true);
  }

  const afterOpenModal = () => {
    // モーダルが開いた後の処理
  }

  // モーダルを閉じる処理
  const closeModal = () => {
    setIsOpen(false);
  }
これらの関数はModalコンポーネント内のプロパティ内で下記のように使われます。
<Modal
  // isOpenがtrueならモダールが起動する
  isOpen={modalIsOpen}
  // モーダルが開いた後の処理を定義
  onAfterOpen={afterOpenModal}
  // モーダルを閉じる処理を定義
  onRequestClose={closeModal}
  // スタイリングを定義
  style={customStyles}
>
以上です！基本的なところは解説したので、もっと詳しく知りたい方はGithubやドキュメントを読むと理解が深まるかと思います!!

ではでは~！

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-12T00:47:03+09:00

Next.jsでのtailwindcssの導入の仕方

流行りのスタイルのtailwindcssの導入の仕方(Next.js)

npx create-next-app next-jsで導入したファイルに

1.npm install
npx create-next-app . --use-npm

npm i tailwindcss

npx tailwindcss init -p
2.?stylesのglobal.cssの中身を書き換える
@tailwind base;
@tailwind components;
@tailwind utilities;
3.?pagesにimport文を追加
import '../styles/globals.css';
import 'tailwindcss/tailwind.css';
4.下記のサイトを参考にclassName内に記述

tailwindcssのチートシート
[例です]
<div classnName="flex justify-center items-center flex-col min-h-screen text-gray-600 text-sm font-mono"></div> 

　 Tweet
Qiitaで続きを読む

20210112のReactに関する記事は9件です。

material-uiを使って展開可能なヘッダー付きサイドメニュー（Drawer）のコンポーネントを作る

目的

前提条件/筆者環境

コンポーネント化の際の構成

コンポーネント化の流れ

material-uiのインストール

デモコードの引用

サイドメニューの内容をコンポーネント化

メインコンテンツをコンポーネント化

サイドメニューの内容とメインコンテンツをサイドメニューコンポーネントに引数として渡せるように変更

終わりに

【ReactNative】スプラッシュ画像の設定(自分メモ)

導入

ios

Android

【react-modal-hook】モーダルコンポーネントに便利なhooksを解説【on Next.js】

前書き

react-modal-hook

シンプルなモーダルコンポーネントを実装してみる

【1】必要なコンポーネントをimportする

【2】useModalの引数にコールバック関数としてモーダルを定義

【3】useModalの返り値を配列の形で受け取る

【4】ModalProviderでラップする

モーダル内部の更新

【Next.js】モーダルコンポーネントの実装を解説【hooks編】

前書き

react-modal-hook

シンプルなモーダルコンポーネントを実装してみる

【1】必要なコンポーネントをimportする

【2】useModalの引数にコールバック関数としてモーダルを定義

【3】useModalの返り値を配列の形で受け取る

【4】ModalProviderでラップする

モーダル内部の更新

Snowpack で React・Vuejs・Svelte を動かしてみる

Snowpack とは

ES Modules までの歴史

ES Modules の誕生

普及しない ES Modules

そして Snowpack の登場

フレームワークへの対応

React

Vue

Svelte

WebWorker 対応

IE対応

【React-modal】モーダルコンポーネントを実装 【on Next.js】

前書き

React-modal

シンプルなモーダルコンポーネントを実装してみる

【1】インストール

【2】モーダル用のファイルを追加

【3】実際にコードを記述していく（全体像）

【4】必要なコンポーネントをimport

【5】Modalのプロパティを解説

【6】アプリのルートを識別するクエリセレクタを指定する。

【7】スタイリングと関数を定義

【react-modal】モーダルコンポーネントを実装 【on Next.js】

前書き

React-modal

シンプルなモーダルコンポーネントを実装してみる

【1】インストール

【2】モーダル用のファイルを追加

【3】実際にコードを記述していく（全体像）

【4】必要なコンポーネントをimport

【5】Modalのプロパティを解説

【6】アプリのルートを識別するクエリセレクタを指定する。

【7】スタイリングと関数を定義

【Next.js】モーダルコンポーネントの実装を解説【UI編】

前書き

React-modal

シンプルなモーダルコンポーネントを実装してみる

【1】インストール

【2】モーダル用のファイルを追加

【3】実際にコードを記述していく（全体像）

【4】必要なコンポーネントをimport

【5】Modalのプロパティを解説

【6】アプリのルートを識別するクエリセレクタを指定する。

【7】スタイリングと関数を定義

Next.jsでのtailwindcssの導入の仕方

【React-modal】モーダルコンポーネントを実装【on Next.js】

【4】必要なコンポーネントを`import`

【5】`Modal`のプロパティを解説

【react-modal】モーダルコンポーネントを実装【on Next.js】

【4】必要なコンポーネントを`import`

【5】`Modal`のプロパティを解説

【4】必要なコンポーネントを`import`

【5】`Modal`のプロパティを解説

`npx create-next-app next-js`で導入したファイルに